The idea here was to create a cross-browser solution for background opacity without using images. Of the major browsers, IE, Opera and Firefox 2 do not support RGBA for background coloring. Firefox 3 and Safari support it. See also: style:focus{drop-shadow:cross-browser}.
To get FF2 and Opera to play along, we use the data:uri scheme to create a semi-transparent png with the same colors and settings we're setting in the CSS. This is the only component which cannot be easily changed.
The assumption, of course, is that Opera will shortly be up to speed with the big boys and that users of FF2 will be upgrading shortly.
Meanwhile, have a look at the source of this page to see how we achieve the semi-transparent background for most browsers, without altering the opacity of the content inside the box and without using images (with the arguable exception of the data:uri image used to support Opera/FF2).
Hey look...a nested child with no opacity applied...much better this way than
with fading text, I say. Even the image looks better...
Oddly enough, though, your CSS won't validate even if you validate it as CSS3. Not sure exactly what that's all about.
Anyway, thanks for stopping by. New version of the TheHolierGrail coming, but not yet online as of this writing (12-JUL-2008). Check back soon for more. ~Bill