opacity in IE8 not working

问题

I have set opacity for a overlay which is working fine in FF, Chrome, Safari and IE9 but not in IE8. I googled alot but did not find any solution.

my css code is

#overlayEffectDiv { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    width: 100%;
    height: 100%;
    filter: alpha(opacity = 50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.50;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3000;
    /* hide it by default */
    display: none;
}

In FF it is looking as below:

but in IE8 it is looking as below:

回答1:

Found solution here. Opacity was not the problem I did some debugging and found it was working fine for ie8 the issue was with jquery fadeIn and fadeOut. jQuery fadeIn was making translucent background to turn solid.

Thanks to all who helped.

回答2:

I don't think you syntax for the filter is correct:

http://blogs.msdn.com/b/ie/archive/2009/02/19/the-css-corner-using-filters-in-ie8.aspx

this might not be the cause of the problem but it might be worth ruling it out.

回答3:

May be you have define zoom also. write like this:

#overlayEffectDiv { 
    width: 100%;
    height: 100%;
    filter: alpha(opacity = 50);
    opacity: 0.50;
    *zoom:1;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3000;
    display: none;
}

回答4:

If the problem occurs for some animation effect involving the layer, you could avoid use filter at all in IE and use instead as a repeated background a small (not too small, like 2x2, use e.g. 100x100) transparent png file with a black background color and ~80% opacity

来源：https://stackoverflow.com/questions/10296204/opacity-in-ie8-not-working