filed under:
PNG, Portable Network Graphics, alpha, transparency, image, filter, procedural surface
IE doesn't care about black people.
Well, maybe that's not fair. But it certianly doesn't care about semi-opaque people.
Among the massive oversights and rendering faux pas Internet Explorer has forced upon us lo these past years, it's inexplicable lack of support for PNG alpha transparency has proven itself among the most frustrating. Realizing their mistake, Microsoft took a very Microsoft approach to the problem and... worsened it. They added to their library of proprietary 'Visual Filters' a technique to replicate alpha transparency, which everyone else was supporting natively. Without going into great detail on why the visual filters scheme is Just Plain Wrong, I will admit that they work, however poorly.
The filter in question is actually a rendering routine or "Procedural Surface" called AlphaImageLoader. What does it do? It makes PNGs work the way they do in other browsers. It's sloppy to implement, but transparent (ha ha) to the user. I'm geussing that the main reason people are reluctant to use this filter is that they assume it will require JavaScript browser sniffing or alternate stylesheets. I believe the following block of CSS does it's own browser filtering and will give the desired effect without JavaScript or excess markup:
- #myDiv {
- background: url(bg.png);
- _background: 0;
- filter:progid:DXImageTransform.Microsoft. AlphaImageLoader(src='bg.png');
- }
The first property sets the background to a PNG image. This will be read by all browsers and the PNG will show up correctly in browsers which supoprt it.
The second property is visible only to IE browsers, due to the underscore preceeding it. Non-IE browsers should ignore it. IE will read the property, and it will override the preceeding property, setting the background to none.
The third property is the filter property, which only IE4+ browsers will read. That big long path references code embedded in the IE rendering engine and runs the routine which re-evaluates how to display the image it's loading. The method can take several agruments, but for our purposes, we've only rovided it with a path to the image.
I haven't tested this fully with Safari , Opera, or any less typical browsers, but I imagine that if this doesn't work, it would be a relatively simple adjustment. Otherwise, this should provide you with a simple, relatively clean way to display PNGs with alpha transparency in all modern browsers and IE.
Or you could just redirect IE visitors here.