1 post tagged “png”

In the effort to post more regularly, I'm going to start posting these "Good Word" tidbits. The idea is to spread the word of various code tips and tricks that many people may not be aware of. (If you've heard of one before, or use it frequently, give yourself a big pat on the back.) I may or may not post the pros and cons of techniques, but will try to link to some supplementary material.

PNGs are often a favorite file format for icons, button images and all sorts of things. Transparent PNGs are transparent on ANY background color; fantastic for when your background color changes with the season, for example. PNG transparency support is already well-supported in Mozilla (Firefox, Safari), Opera, IE5 for Mac and a few others. Where doesn't it work? IE.

Here's the trick. IE has these semi-useless visual filters, one of which is AlphaImageLoader. Here's how to use it.

<div style="width: 10px;
                height: 10px;
                position: relative;
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');"></div>

Messy to use inline, of course. Ideally, you would call the PNG as a background image from your stylesheet and drop the filter call in your IE-only stylesheet.

More info: Cross-Browser Variable Opacity with PNG: A Real Solution [A List Apart]