Cross-browser semi-transparent backgrounds

Semi-transparent backgrounds are nice. They would be more popular, but Internet Explorer doesn't support .png transparency. There are a few clunky workarounds. Here's another that's a little less clunky.

Update: Here is probably the easiest way. You can stop reading this page now.

Update: The kind folks on css-discuss point out some other methods. I believe most of them use javascript.

Update: An article from A List Apart has more techniques (some of which are downright painful to look at...)

Update: Workaround for link bug in IE 6.0

Update: Now works in IE 5.0 (Thanks MG)

Example:

I like flowers.

They smell nice.

When combined with bees, they make honey...

How it works:

The ingredients are:

A background image: flowers.jpg
A small, semi-transparent .png image: 75p_honey.png
(The "75p" means 75% opaque)
These are a snap to create with The GIMP.

A small css hack to overcome IE's lack of support for semi-transparent .png images:

.trans_box2 {
  font-family:verdana;
  font-weight:bold;
  padding:40px;
  margin:30px;
  border:solid 1px #555;
  /* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/75p_honey.png');
}
/* IE ignores styles with [attributes], so it will skip the following. */
.trans_box2[class] {
  background-image:url(/75p_honey.png);
}

The html:

<div style="float:left;background-image:url(/flowers.jpg);border:solid 1px #000;padding:10px;">
<div class="trans_box1" style="float:left;">
I like flowers.
</div>
<div class="trans_box1" style="float:left;">
They smell nice.
</div>
<div class="trans_box2" style="float:left;">
<a href="http://www.google.com/search?q=flowers+bees+honey"&gt;When combined with bees, they make honey...</a>
</div>

More information

Another use for the semi-transparent .png css hack.
Microsoft documentation for AlphaImageLoader.

Addendum: IE Link bug

Thanks to nitehood for pointing out a bug/problem in IE. Using alphaimagefilter on a div makes links inside the div quit working (they appear as links, but don't respond to mouse clicks or hovering).

Upon further research, this has been noticed before, here and here.

This points toward a possible cause. Apparently, the dimensions of the background image affects IE's display of links. That's a pretty ugly bug.

I tried various widths and heights for the background .png image. The results are in the table below (Y="links work in IE 6.0" N="links don't work in IE 6.0")

	width
height		1	2	3	4	5	6	7	8	9	10
	1	Y	Y	Y	Y
	2	Y	Y	Y	Y			Y			Y
	3	Y	N	N	N			N			N
	4	Y	N
	5
	6
	7	Y	N
	8									N
	9										N
	10	Y	N							N	N

Based on these results, the background image is now 2x10 pixels. Links now work in IE 6.0.

for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--) { if (itsAllGood &amp;amp;&amp;amp; img.src.match(/\.png$/i) != null) { var src = img.src; var div = document.createElement("DIV"); div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizing='scale')" div.style.width = img.width + "px"; div.style.height = img.height + "px"; img.replaceNode(div); } img.style.visibility = "visible"; }