Question

I have an PNG image file that is partially transparent. I need toggle its opacity .

Currently I am using the following CSS code to permit opacity:

filter:alpha(opacity=50);

However, IE has trouble handling the transparent portion of the PNG. When I try to fix it by adding the following CSS:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/translucent_effect.png', sizing Method='scale');

Well, it doesn’t work. My question is: what is the best solution that people have found to this problem? Should I just convert PNG into GIF? Or is there a more elegant solution?

Thanks.

Answer 1

IE’s filter style is a horrible mess. It does allow the browser to do a few tricks that would otherwise be out of its scope, but it is non-standard, and has some major issues.

I can’t be certain without seeing your complete CSS, but it looks to me as if you’ve been caught out by one of filters biggest ‘gotcha’ quirks:

If you need to specify more than one filter, you have to specify them together. If you specify them separately, as you’ve done in your example, the second filter overrides the first, even though they are in fact performing completely different actions. This is in fact consistent with the way CSS stylesheets work in general, but is counter-intuitive because of the scope of what filter is able to do.

You can specify multiple filters in a single filter style, separated by a space.

See here for a reference: http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx

The problems with this approach are obvious, if you want to have different effects triggered by different class names on your stylesheet — because there’s not way to combine filters from different sources into the same element.

The other big gotcha which might catch you out is the fact that filters written with the progid: syntax are actually invalid CSS due to the colon, and it’s bad enough to cause some non-IE browsers to choke on the entire stylesheet. This can be prevented by using the shorthand syntax (as per the alpha() filter in your your first example), for IE6 and IE7, or for IE8 with the -ms-filter alternative, using the longer syntax, enclosing the whole thing in quotes.

Here’s an example:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/translucent_effect.png', sizing Method='scale');"

Hope that helps.