Web Design: (part 2) Pete's Multi-Purpose Alpha-Background PNG

This one predates the gradient idea--and probably inspired the gradient idea. This came about when I was designing some customized GetRight To Go (http://www.getrighttogo.com/) downloaders. A large game company wanted a standard template that they could just change the background image to make custom downloaders for each of their new games.
This "background image" would be full sized for the downloader window--essentially the same graphic as the game's advertising campaign, or the graphics from the box, something like that.

At first, this seemed very difficult to do, since I wouldn't know anything about the future background images that they may use. Some would be light, some dark, All different colors, some high-contrast, some low, etc...

I thought an ideal solution would be semi-transparent DIV overlays that could help neutralize the differences between whatever images may be used. This would allow the text and interface to be legible under any circumstance. IE has a proprietary alpha-channel control, but this effects the opacity of the entire content of the element, and I didn't want that! I just wanted to set the background to X% transparent.
(Setting a DIV to Alpha:50% using IE's control would also set the text and graphics inside the DIV to 50%.)
Also, (obviously) using proprietary IE controls is not cross-platform.
NOTE: Stacking two DIVs with absolute positioning--one with the text and another with the alpha background would have been OK for the specific GetRight To Go project, as the software uses an embedded IE control to show the customized content (thus cross-platform is unnecessary). But still, this seemed like a clunky way to achieve what I wanted.

Then I came up with a pretty cool solution:
Although CSS can't set background-only opacity, PNGs can! This type of effect can be achieved by using a background image instead of a background color for the DIV. A small PNG with the alpha setting that you want will do the trick.
NOTE: IE can take painfully long to 'tile' a 1x1 pixel image into a large area, so I would recommend using larger images just for this purpose. At 100x100 pixels (solid color at 50% alpha) the PNG file size is still less than 1k. 300x300 is less than 4k. for smaller areas like buttons, even 5x5 or 10x10 PNG will give you much-improved performance over 1x1.

Here it is in action:

Alpha: 50% white
Multiple overlays
are possible, too...

Normal background.

Alpha: 25% white

Alpha: 50% white

Alpha: 75% white

Alpha: 25% gray

Alpha: 50% gray

Alpha: 75% gray

Alpha: 25% black

Alpha: 50% black

Alpha: 75% black

Code sample:
<div class="alphasamples" style="BACKGROUND-IMAGE: url(http://www.getrighttogo.com/template-images/alpha-25-black.png); COLOR: white">Alpha: 25% black</div>

This doesn't need to be white/gray/black. Any color set to any transparency will work.