[thelist] [CSS] - semi transparent background colour, with solid text...?

[Lee Kowalkowski]

On 01/12/2008, Tris <beertastic at gmail.com> wrote:
> I've got my divs like this:
>
> <div id="titleContainer">
> <div id="titleText">
>   My title
> </div>
> </div>
>
> and CSS:
> #titleContainer {
> background-color: #000;
> filter:alpha(opacity=93);-moz-opacity:.93;opacity:.93;
> }
> #titleText{
> color: #fff;
> filter:alpha(opacity=100);-moz-opacity:.100;opacity:.100;
> }

I think that should be 1 instead of .1 - but it doesn't really help.
It's still 100% of 93%.

There is CSS3 rgba for specifying colours, so you can just do:
#titleContainer {background-color: rgba(0, 0, 0, .93);} - and nothing
else.

This works the way you want it to, but isn't widely supported yet
(Firefox3, Safari, Chrome).  I was suprised that Opera doesn't support
it yet (unless they've released it in a new version since last week).

You could do a non-transparent fallback for other browsers.  Or limit
the IE-specific filters to IE-specific style sheets at least, as long
as there's sufficient contrast for readability.

--
Lee