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

Giganews Newsgroups
Subject: How can I give an element a semi-transparent background?
Posted by:  Trond Michelsen (trondmm-usen…@crusaders.no)
Date: Wed, 23 Aug 2006

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

Replies