css opacity not working in IE

Question

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?

Answer 1

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.

Answer 2

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)