For a long time, IE's alternative to the CSS opacity property has been the filter property:
filter: alpha(opacity=50);
If you Google "IE8 opacity", you'll find a number of pages (including one at quirksmode.org) telling you that Microsoft removed support for opacity in a preview release of IE8, and then put it back in, but with a new syntax. These pages assert that in order to achieve the same half-transparent effect as above, you must write (note the -ms- prefix and the quoted value):
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
As far as I can tell, however, all of these pages are based on preview releases. My (very simple) testing indicates that the old syntax continues to work in IE8, and there is no need to add a second non-standard property to our stylesheets for IE8.
This post at the IE blog backs me up on this (scroll down to the section titled "A Pragmatic Solution") Or at least I think it backs me up. The post tries to explain and justify the initial change to the filter syntax but it just doesn't make much sense.
Someone please correct me if I'm wrong. Are there versions of IE8 in the wild that don't support the old filter syntax?
@__DavidFlanagan
See also the MSDN documentation for "filter":
"Internet Explorer 8. The -ms-filter attribute is an extension to CSS, and can be be used as a /synonym/ for filter in IE8 mode" (my emphasis).
http://msdn.microsoft.com/en-us/library/ms530752(VS.85).aspx
Using the -vendor-prefix is in line with the css spec:
http://www.w3.org/TR/css3-syntax/#vendor-specific
Additionally it lowers the possibility of property-name conflict when using SVG filters via css.
Benjamin: thanks for the link.
Paul: I agree that vendor prefixes are good. But it seems pointless to use a vendor prefix for IE8 when you're also going to be using a property without the prefix for IE6 and IE7.
I guess this explains why I couldn't find any trace of "progid:DXImageTransform.Microsoft.Alpha" in the jQuery source - it's not needed.
Funny how this pieces of advice seem to live on despite being no longer correct.
Yes this works for SETTING the opacity, but does not work CHANGING the opacity (during hovering for example).
Any suggestions on how to change the opacity in IE8 after it has been set?