opacity in IE8 not working

Question

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:

enter image description here

but in IE8 it is looking as below:

enter image description here

Have you read that **http://stackoverflow.com/questions/1948176/opacity-css-not-working-in-ie8 ??** — huMpty duMpty, Apr 24 '12 at 10:37
Use `filter` instead of `-ms-filter`. The latter can only be used in IE9 and up. — Mr Lister, Apr 24 '12 at 10:37
Hey check to this url and know about opacity http://www.quirksmode.org/css/opacity.html — Rohit Azad Malik, Apr 24 '12 at 10:39
using jquery fade effects for example breaks the filter, maybe you should search in this direction.... — meo, Apr 24 '12 at 10:40
@Adriano I can't seem to find the correct MSDN page for `filter`, but here's one mozilla page that says IE8 uses `filter`: https://developer.mozilla.org/en/CSS/opacity — Mr Lister, Apr 24 '12 at 10:42
@MrLister you're right, they're synonyms! http://msdn.microsoft.com/en-us/library/ms530752(v=vs.85).aspx — Adriano Repetti, Apr 24 '12 at 10:46
@Adriano Oh... you mean I was wrong, they're synonyms! The OP's syntax was correct after all. — Mr Lister, Apr 24 '12 at 10:49
@MrLister not really, we were both wrong...I thought filter wasn't supported in IE8! LOL — Adriano Repetti, Apr 24 '12 at 10:56

score 2 · Accepted Answer · edited May 23 '17 at 10:30

2

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.

edited May 23 '17 at 10:30

Community

1
1

answered Apr 25 '12 at 06:32

Sandeep Kumar

13,799
21
74
110

score 0 · Answer 2 · answered Apr 24 '12 at 10:46

0

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.

answered Apr 24 '12 at 10:46

matpol

3,042
1
15
18

score 0 · Answer 3 · answered Apr 24 '12 at 10:46

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;
}

score 0 · Answer 4 · answered Apr 24 '12 at 10:49

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

opacity in IE8 not working

4 Answers4

Linked