Stylesheets - Re: is it possible: transparent background color for div?

Author

Re: is it possible: transparent background color for div?

Johannes Koch

2006-11-05, 11:33 pm

Chris schrieb:
> I have two div's, div1 is a lot bigger and is the parent of div2, and div1
> also has a background image.
>
> What I would like to do, is set a background color for the smaller nested
> div2, but at the same time it is transparent and the background image of
> div1 shines through. I hope my explanation is a bit clear.

I don't think the specs forbid it. Did you try it?
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Ben C

2006-11-05, 11:33 pm

On 2006-10-20, Chris <krimgelas@hotmail.com> wrote:
> Hello,
>
> I have two div's, div1 is a lot bigger and is the parent of div2, and div1
> also has a background image.
>
> What I would like to do, is set a background color for the smaller nested
> div2, but at the same time it is transparent and the background image of
> div1 shines through. I hope my explanation is a bit clear.
>
> Is this kind of effect at all possible, without using a background image for
> div2 with alpha channel?

You can use the opacity property on div2.

opacity: 0.8;

for example.

It's in CSS3, not 2.1, but is fairly widely supported.

Spartanicus

2006-11-05, 11:33 pm

Chris <krimgelas@hotmail.com> wrote:

>I have two div's, div1 is a lot bigger and is the parent of div2, and div1
>also has a background image.
>
>What I would like to do, is set a background color for the smaller nested
>div2, but at the same time it is transparent and the background image of
>div1 shines through.

Two background images in overlapping elements? Sounds dodgy. A URL would
have allowed us to see what you are actually trying to do, but as per
usual no URL is supplied.

>I hope my explanation is a bit clear.

About on par with the opacity of mud.

>Is this kind of effect at all possible, without using a background image for
>div2 with alpha channel?

http://www.w3.org/TR/2001/WD-css3-c...05#transparency A CSS3
property which is supported sans vendor prefix by recent releases of
Opera and Mozilla. For IE there is the familiar filter:alpha method.

--
Spartanicus

Chris

2006-11-05, 11:33 pm

Ben C wrote:

> On 2006-10-20, Chris <krimgelas@hotmail.com> wrote:
>
> You can use the opacity property on div2.
>
> opacity: 0.8;
>
> for example.
>
> It's in CSS3, not 2.1, but is fairly widely supported.

Wow, that's really fantastic. Thanks very much!

Chris