W3C home > Mailing lists > Public > www-style@w3.org > August 2010

Re: [css3] About opacity

From: Brad Kemper <brad.kemper@gmail.com>
Date: Tue, 17 Aug 2010 09:29:10 -0700
Cc: Felipe Nascimento de Moura <felipenmoura@gmail.com>, www-style <www-style@w3.org>
Message-Id: <5683CC9B-9E33-4E34-9EB5-AD81301A440A@gmail.com>
To: Peter Beverloo <peter@lvp-media.com>

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 :)
>> Well, that's all. Thanks for your time.
>> Best Regards.
>> --
>> Felipe N. de Moura
>> Web development
>> 
>> http://felipenascimento.org
>> http://twitter.com/felipenmoura
>> ---------------------------------
>> LinuxUser #508332
>> Making the web a better place to live
> 
> 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.).
Received on Tuesday, 17 August 2010 16:29:48 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:30 GMT