Workaround for Internet Explorer's faulty PNG Alpha channel support
The only thing that still prevents PNG's universal adoption is The Evil Empire, as usual. There has been two releases of Internet Explorer and still do not support the alpha trasparency channel properly. Fortunately, there is an answer, a simple answer. The workaround is a kind of poetic justice--The fix only works on IE browsers, and only IE browsers need the fix. It is done with Microsoft proprietary
extensions to CSS, which means it would get ignored by any non-microsoft browser.
We are going to use the AlphaImageLoader filter from the Microsoft stylesheet extensions. It is perfectly equipped to deal with the PNG transparency channel. First, let's use the SPAN tag to load our IE-only image. We'll create a style entity that matches our picture size exactly then filled with our source image.
<SPAN style="width:
120px;height:
40px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='
transparent.png');" >
At this point, we can try it out in Internet Explorer. Bravo. Now what about those non-IE folks? They'll get a empty SPAN entity, because that filter statement won't mean anything to them. Here's where we get really clever.
<IMG style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" SRC="transparent.png" />
Whoa. We load the same image again into that SPAN entity but we make it invisible. Why? Because only the IE browsers will hide the IMG and other browsers will show it normally. So IE browsers see this:
<SPAN style="width:120
px;height:40
px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent.png');" ><IMG style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);"
SRC="transparent.png" />
while everyone else sees
<SPAN style="width:120
px;height:40
px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent.png');" ><IMG
style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" SRC="transparent.png" />
All this works without dynamic HTML generation,JavaScript or Java applets. A winning hack!
There is a simpler way to get transparent background PNGs to work in IE. Simply downconvert the truecolor picture to a 256 colour palette, then pick a colour to assign as transparent. Note: this is not alpha blending, it's GIF style transparency mask.
Plaudits to Mark Wilton-Jones for his most excellent tutorial http://www.howtocreate.co.uk/
Razzberry to MS for not fixing Q265221