IE Filter: Alpha messes up PNG transparency

[Craig]

I have an issue where I require buttons to be semi-opaque until the user hovers over them. The problem is, that when the Alpha opacity is applied to a PNG containing transparent regions, it loses the transparency in semi-transparent parts of the image, like anti-aliased borders etc. Here is an example, just copy the two lines into a file and view using IE 7+. Notice the image with the alpha transparency applied has a nasty black outline.

<img src="http://example.com/ie-png-transparency/test.png"></img>

<img src="http://example.com/ie-png-transparency/test.png" style="filter:Alpha(opacity=100)"></img>

[edited by: engine at 8:16 am (utc) on Jun 9, 2010]
[edit reason] please use example.com [/edit]

[subexpression]

Craig,

You'll probably need to use the png behavior fix...which requires third-party code and a transparent gif image.

Once you have the htc behavior file and the transparent gif image, you load it in your css:

<style type="text/css">
img {
behavior: url('pngbehavior.htc');
}
</style>

Then, IE5+ can handle png's with 8bit alpha transparency.

Go to your favorite search engine, and type in:
'png htc behavior'
There's a few places you can download this code.
Hopefully we won't need it much longer when IE6 is finally laid to rest.

I've personally never had trouble with IE7+, but IE6 & under would create the ugly black outline you described.