W3C home > Mailing lists > Public > www-style@w3.org > January 2013

Re: Opacity applying to child elements

From: Philippe Wittenbergh <ph.wittenbergh@l-c-n.com>
Date: Sat, 19 Jan 2013 14:03:15 +0900
Cc: www-style@gtalbot.org, Mohammed Kashim <me@mgakashim.com>
Message-Id: <9064DB10-CB1E-40AE-A22A-27165EBCCE5D@l-c-n.com>
To: W3C www-style mailing list <www-style@w3.org>

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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:04 GMT