Stylesheets - How can I give an element a semi-transparent background?

Author

How can I give an element a semi-transparent background?

Trond Michelsen

2006-08-23, 6:58 pm

Hi.

I have a transparent PNG-image that I would like to display on top of
the rest of the web page. I've already got this part working. But, I'd
like the background (as in "the part of the image that is transparent"),
to be semi transparent instead. So, I've wrapped the image in a
div-tag with the style "opacity: .70" instead. This gives me pretty
much the semi transparency that I'm looking for, except that this makes
the entire image transparent as well. I tried setting the opacity of the
image to 1.0, but that didn't make any difference.

As a workaround, I've taken the image out of the div-tag, and positioned
them on top of each other. This "works", but it really doesn't "feel"
right. It's a clumsy solution, and I was hoping there's a better way to
do this.

So, is it possible to set the opacity of an element without affecting
the opacity of the element's children?

--
Trond Michelsen

VidTheKid

2006-08-26, 6:33 pm

Trond Michelsen wrote:
> I have a transparent PNG-image that I would like to display on top of
> the rest of the web page. I've already got this part working. But, I'd
> like the background (as in "the part of the image that is transparent"),
> to be semi transparent instead.

Why not alter the PNG to have a semi-transparent background, instead of
fully transparent? At the risk of answering my own question, IE 6 or
eariler would make such a PNG entirely opaque. But that may be the
case already, depending on which transparency style your PNG uses.
8-bit PNGs have essentially the same capabilities as GIFs, except
without animation. There is a 256 color limit, with "transparent"
counting as a color. IE 6 displays these correctly. There are also
32-bit PNGs, where each pixel can be any color at any opacity. IE 6
renders these incorrectly, and the result is essentially the intended
image plastered onto a solid gray rectangle. IE 7 promises to display
these images correctly.

I'd be glad to alter your PNG for you if you don't mind alienating IE 6
users.

--
Vid the Kid

Trond Michelsen

2006-08-26, 6:33 pm

VidTheKid wrote:
> Trond Michelsen wrote:
> Why not alter the PNG to have a semi-transparent background, instead of
> fully transparent?

Well, the PNG is generated on the fly from a program called mapserver,
and although it's possible to get mapserver to generate 32-bit PNGs,
there's no opacity setting, only transparency on/off.

> At the risk of answering my own question, IE 6 or
> eariler would make such a PNG entirely opaque. But that may be the
> case already, depending on which transparency style your PNG uses.

Right. It's opaque in IE6 at the moment, but I don't worry too much
about that right now. I'll deal with IE later.

> I'd be glad to alter your PNG for you if you don't mind alienating IE 6
> users.

I'd gladly let you fix them, if it had been a finite number of PNGs :)

I guess I could do som trickery on the webserver to send the images
through ImageMagick, and fix the transparency here, but if there's a CSS
solution, I'd rather use that.

--
Trond Michelsen