Re: Opacity applying to child elements

Le 19 janv. 2013 à 12:41, "Gérard Talbot" <www-style@gtalbot.org> a écrit :

> Name: 	opacity
> (...)
> Inherited: 	no
> (...)
> If the object is a container element, then the effect is as if the
> contents of the container element were blended against the current
> background using a mask where the value of each pixel of the mask is
> <alphavalue>.
> "
> 3.2. Transparency: the 'opacity' property
> http://www.w3.org/TR/css3-color/#transparency
> 
> When applying opacity to a container div, then it should not apply and
> does not apply to its children.

The opacity property applies to the element and all what it contains. The whole box and its descendants will be 'faded' or translucent [*]. Of course, the descendent elements will no have any opacity applied (unless some opacity is specified for them).

As pointed out by Rik Cabanier, what the OP is (possibly) looking for is applying some transparency to the background  (and eventually borders) of the element — in which case rgba() or hsla() colours should be used.

 [*] the wording in the spec is very confusing for stylesheet authors, I've seen that same request often posted to mailing lists (CSS-D and the like).

Philippe
--
Philippe Wittenbergh
http://l-c-n.com

Received on Saturday, 19 January 2013 05:03:42 UTC