PNG files with partially transparent pixels are an extremely useful design tool for web developers. They blend in smoothly regardless of what background they're placed over, so if you suddenly decide to change the background of your web page from magenta to hot pink, you don't need to remake the image.
Here's an example.
All of the images above are in fact the same file. The star image they show is a partially transparent PNG, which allows the background behind it to show through regardless of what it is. We can even use other images beneath it.
This effect is especially useful if you make just a few pixels at the edge of an image partially transparent, so that the otherwise-solid image blends seamlessly into whatever page it might wind up on.
The Problem: Internet Explorer
In Internet Explorer 6 and lower, partially transparent PNGs are not properly supported. Any transparent regions will show up as a random opaque color, which destroys the usefulness of the image.
It is possible to coerce Internet Explorer into displaying partially transparent PNGs correctly. It is, however, difficult, and relies on proprietary filters. The basic code works like this:
Replace "file.png" with the name of your file. Replace #whatever with an appropriate CSS selector. This will load the image as a background in IE 6 with the transparency corrected. Note, however, that it will ALSO cause the background to disappear in all other browsers (to fix this, see the "Conditional Comments" section below).
If you have a regular <img> tag that you want to load properly, then you'll need to use the iepngfix.htc method, which involves using a pre-made IE-specific script to do some surgery on each PNG as necessary. (The script is pre-made and easy to use.)
These methods will fix transparent PNGs as far back as IE version 5.5.
Conditional Comments
In order to get this working site-wide, you'll want your IE PNG fixes in an external stylesheet. But, as mentioned above, if you have the IE-specific CSS and the regular CSS in the same file, then browsers other than IE will stop working properly. To avoid this, use conditonal comments.
Conditional comments are a way of adding HTML that will only be interpreted by Internet Explorer. Here's an example:
IE will recognize the <style> element inside this code, and load the stylesheet called ie.css. Every other browser will treat the whole code block as a comment, and ignore it.
You can also choose to apply the code to particular versions of IE, which is useful since IE 7 can handle PNGs properly without any further assistance. Here's how you tell it that you want the style sheet to apply only to IE 6 and lower:
Conditional comments can be used anywhere in a document, but the HTML inside them follows the same rules as usual. So, for example, <style> tags still have to go inside the <head> of the document.
Caveats and Gotchas
Scenario: using a small tiling PNG to make a box partially translucent
Suppose you want a box that has a partially transparent background. You can assign it a partially transparent PNG, let the image tile, and there you go. There are, however, some problems with this approach.
If the PNG is ANY other size than 1x1 pixels, loading it with AlphaImageLoader will disable some or all of the links contained in a child DIV or TD element. The links will appear to be links, but the cursor will not change when it moves over them, and clicking them has no effect. This may happen even if you're using a non-tiling background. The problem is that the "background" image is being layered ON TOP of the links, so that when you try and click the link, you're actually clicking the image.
To fix this, make each link relatively positioned and give them a very high z-index. Suppose you've got a <div> with an ID of "navigation". To correct the unclickability problem, you would add CSS like this:
Image size
Safari (prior to version 2.02, I think) requires the PNG to have dimensions of at LEAST 2x2 pixels. Any less than that will cause the image to load as a solid color. Since IE will disable links if a background PNG is any more than 1x1 pixels, this requires at least two files, served up to the requisite browsers.