6

I've literally thrown in every opacity option I know of and it's still not changing the opacity,

your not supposed to see a blue box

what to do?

8
  • 3
    what version of IE? might want to be specific, that way we can tell you it is not supported...
    – Jakub
    Jul 17, 2012 at 5:50
  • 10,9,8 (dont care about the rest)
    – vvMINOvv
    Jul 17, 2012 at 5:52
  • What about the simple, non predixed version : "opacity : 0"?
    – gion_13
    Jul 17, 2012 at 5:54
  • 1
    I don't see a blue box anyway in ie10.. or ie9 or ie8
    – jeschafe
    Jul 17, 2012 at 5:54
  • 1
    "Works on my machine". :P Your filter: alpha(opacity=0); is correct for IE9.
    – Scotty
    Jul 17, 2012 at 5:59

3 Answers 3

6

opacity does not work on pseudo objects in IE 10,9,8

Try this code:

HTML:

<div></div>

CSS:

div{
  width:100px;
  height: 100px;
  background: blue;

  filter:alpha(opacity=30);
  -moz-opacity:0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;
}

div:after{
    content: ' ';
    position: absolute;
    width:100px;
    height: 100px;
    left: 200px;
    background: blue;

    filter:alpha(opacity=30);
    -moz-opacity:0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

Click to see it in action

What you're supposed to see is two squares both semi transparant. However IE disregards the opacity properties for the pseudo item, and it renders it completely opaqe.

6
  • Is this a solution to your question?
    – user577537
    Jul 17, 2012 at 8:23
  • yea, I was going to accept it as the answer but I can only do it in a minimum of two days
    – vvMINOvv
    Jul 17, 2012 at 9:50
  • I am using IE9 and I don't see a blue div when I open this link Jul 17, 2012 at 10:06
  • 1
    Can you paste the code from the link into this answer in that case, no need to jump to another site.
    – user577537
    Jul 17, 2012 at 10:18
  • 2
    All I can see now is an offer to buy the tinkerbin.com domain.
    – matt
    Jun 23, 2014 at 17:58
5

Another solution for IE9+, FF 3+, Chrome, Safari 3+ and Opera 10+ is using rgba as background color value. See http://jsfiddle.net/uRgfu/4/

<style type="text/css">
    .color-block {
         background-color: rgba(0, 0, 0, 0.5);
    }
</style>

To support older IE versions too, you can add something like this:

<!--[if lte IE 8]>
    <style type="text/css">
        .color-block { 
            background:transparent;
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000); 
            zoom: 1;
        } 
    </style>
<![endif]-->

<style type="text/css">
    .color-block {
         background: rgb(255,0,0); /*Fallback for other old browsers*/
         background: rgba(255,0,0, 0.5);
    }
</style>

Note that "#7FFF0000" from the conditinal comment equals "rgba(255,0,0, 0.5)", because 7F(hex) = 50(dec). So the alpha in the cc ranges from 00 to FF whereas in rgba it goes from 0 to 1. And that you should use "background" instead of "background-color", otherwise the fallback won't work. See http://jsfiddle.net/uRgfu/8/

Source http : // css-tricks.com / rgba-browser-support / (sorry not enough reputation to post more than 2 links)

0

Change 0 to some digit:

    filter: alpha(opacity=10);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.