IE8 and below MS filter not same as RGBa

Question

For modern browsers I use background: rgba(0, 0, 0, 0.75); for a full viewport div overlay.

It wasn't working for IE8 and below, so I searched for a solution and I found this on css3tricks but tweaked the values a little:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);

It works, however its not the equivalent of background: rgba(0, 0, 0, 0.75);. <- This one appears lighter then the other one. But I have set the opacity on the MS filter to 99% but it's still appears lighter.

Does anybody know how I can get the same result?

Answer 1

Quote from MSDN http://msdn.microsoft.com/en-us/library/ms532930%28v=vs.85%29.aspx:

Color is expressed in #AARRGGBB format, where AA is the alpha hexadecimal value, RR is the red hexadecimal value, GG is the green hexadecimal value, and BB is the blue hexadecimal value. The alpha value controls the opacity of the object. An alpha value of 00 is transparent, while a value of FF is opaque.

This means:

#3f000000 == rgba(0, 0, 0, .25)
#7e000000 == rgba(0, 0, 0, .50)
#bd000000 == rgba(0, 0, 0, .75)

So the following CSS should produce equivalent background on IE6, IE7 and IE8:

background-color: rgba(0, 0, 0, 0.75);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bd000000,endColorstr=#bd000000);

You should put the filter property inside a conditional CSS for < IE9, otherwise IE9 seems to apply both properties and the result gets darker.

However, I'd instead suggest using a small semi-transparent PNG with the desired color as background-image with background-repeat: repeat; for better browser support - if needed.