Re: [css3] About opacity

On Aug 17, 2010, at 8:44 AM, Peter Beverloo wrote:

> On Sun, Jul 11, 2010 at 14:59, Felipe Nascimento de Moura
> <> 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
>> ---------------------------------
>> 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 UTC