Using Semi-Transparent PNGs In <img> Tags
Below this paragraph you should see five small (16x16 pixel) stars against a grey a white checked background. Each star has a drop-shadow and, from left to right, the stars themselves have opacities of 100%, 80%, 60%, 40% and 20% (and you could also image a sixth with 0% opacity).
(Note: these semi-transparent stars were created in Adobe Photoshop)
If you are viewing this page with Internet Explorer 6 or earlier then the fading stars will appear solid with grey backgrounds.
There is a javascript workaround for IE5.5/6 which involves using Microsoft's proprietary AlphaImageLoader filter. Many different variants of the basic workaround are available. I've used the bobosola pngfix.js variant -here's the script file. There are limitations with it as explained on his site.
Using Semi-Transparent PNGs As Backgrounds
Below this paragraph you should see a blue square against a grey a white checked background. This image is a 75% opaque single blue pixel expanded to 50x50 (if your eyesight and monitor are good, you may also see the second 1x1 pixel image near the bottom right corner of the square that's displayed at it's original size).
(Note: this semi-transparent square was created in Adobe Photoshop)
The 1x1 image shown above has been used as a background image below:
You should see the body background behind this text, and it should appear as if this text is written on coloured perspex. Main references for this bit are Eric Meyer's and Lloyd Dalton's examples.
There's many useful references on the web (just do a Google search for 'ie background png transparent'), but every 'solution' had problems. The most promising one, and I use it here, is Lloyd Dalton's 2003 CSS-only one. It's beauty is that it hides all the stuff that's specifically to fix the IE problem in a separate CSS file that only IE ever gets to see! How? It uses Microsoft's non-standard HTML conditional comments to hide a <link> tag from non-IE browsers (and from IE7+). The <link> is to an IE-only external stylesheet (and, importanatly, this is after the main stylesheet so that it overrides it). In this IE-only stylesheet we use Microsoft's non-standard AlphaImageLoader filter on the background-image CSS property to stretch a small semi-transparent PNG (1 pixel square) to fill the whole element! Beautiful!
Problem 1: When using a 10 wide x 2 high PNG as suggested, some links in some child elements didn't work. The 1x1 PNG seems to fix this.
Using a PNG8 (as suggested on a forum, admittedly for a different problem. But I vaguely remembered something about PNG8, so I tried it) didn't help. A PNG8 has GIF-like transparency, so the transparent pixels are dithered, and when you scale the image... Of course, I could use a huge image and set sizingMethod to 'image' or 'crop'.