Re: [css3] About opacity

On Aug 17, 2010, at 9:29 AM, Brad Kemper wrote:

> On Aug 17, 2010, at 8:44 AM, Peter Beverloo wrote:
> 
>> On Sun, Jul 11, 2010 at 14:59, Felipe Nascimento de Moura
>> <felipenmoura@gmail.com> wrote:
>>> 
>>> Hi there.
>>> I'm sending this e-mail because I looked around and couldn't find anything about it. So, I'm sending this little idea.
>>> It is related to the implementation of opacity. I have thought on this:
>>> <style type='text/css'>
>>> #parentEl
>>> {
>>>  padding:10px;
>>>  opacity: 0.5;
>>>  background-color:blue;
>>> }
>>> #son
>>> {
>>>  width:40px;
>>>  height:40px;
>>>  opacity:1;
>>> }
>>> </style>
>>> <div id='parentEl'>
>>>    <div id='son'></div>
>>> </div>
>>> 
>>> Well, the point is that ... I believe it would be better if the son could restore its opacity to 1, if it s set to it, instead of always applying its parent opacity plus its own opacity.  In this case, we would be able to easily implement a transparent background with opaque content.. When working with RIAs, worrying about the look of the application, it may be very handy 

>> 
>> Transparent backgrounds may be set using RGBA/HSLA colors, like this:
>> 
>> element { background-color: rgba(255,0,0,0.5); }
>> 
>> This equals a semi-transparent red background. Opacity is inherited
>> indeed, you apply it to an element including all its contents and
>> descendants. Alternatively you could use semi-transparent PNG images
>> or "blocked" 2x2 pixel images, only two of which are colored.
> 
> It's not just about inheritance, as inherited properties can be overridden and opacity can not override the opacity of a parent. And, this was a simple example. I have often found myself in situations where I want a decedent element to be able to "jump out" of it's parent context (opacity, z-index, overflow, etc.).

Children cannot be less opaque than their parents because of the way that opacity is rendered. The element with opacity and all its descendants are rendered into a bitmap first, and that bitmap is then painted with the specified opacity value. This approach is necessary, because otherwise overlapping children would have a different appearance. This is also the reason why opacity < 1 creates stacking context.

We've talked before about a "background-opacity" property that simply allows you to control the alpha value of the element's background. RGBA colors are of course also available, and maybe at some point we'll have a way to filter images, so that you can make individual background images non-opaque.

Simon