Alpha-transparent PNG’s, (“PNG-24” for those of you saving out of Photoshop) are an amazing thing for web designers. We can make a button with a drop shadow on it and it will multiply that shadow onto whatever happens to be underneath it, even if that background changes. This may seem like a trivial thing, but it’s really not. The possibilities that alpha transparency opens up for you as a designer are many. The problem, as you are likely well aware, is that Internet Explorer (IE < v7) do not support alpha transparent PNG’s. The more you think about it, the sadder it gets. Luckily, there are a few methods that have arisen over the years to help us whip these older versions of IE into shape. Here is a roundup of some of those techniques.
NOTE: All of these techniques ultimately end up using the Microsoft AlphaImageLoader filter to force the transparency. The techniques just vary in HOW and WHEN that filter is applied.
Internet Explorer supports a “custom extension” to CSS in the form of a “behaviors” attribute. None of the other major browsers support this, allowing you to take advantage of browser-specificity to force this PNG hack onto only browsers that need it. This technique uses a big nasty chunk of non-validating CSS which essentially uses the AlphaImageLoader filter to force the transparency.
Remember that there are two places you could need potentially need to apply transparency: to inline graphics (<img>), and CSS background-images. With this technique, you could apply the behavior to a specific CSS class (like “.png”) and then selectively apply that class where needed OR you could apply the behavior globally to all img elements.
Also note that while this will work on CSS background images, it will not work if that image is repeated or positionedin any way.
The best part about this technique is that it’s a one-liner in your CSS file that references this “.htc” file, and you are done. The behavior magically applies the the necessary Microsoft proprietary crap to the needed page elements and you got yourself alpha transparent PNG’s in IE.
MORE ON THIS TECHNIQUE:
Twin Helix: IE PNG Fix