Re: [css3] About opacity

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.

Peter Beverloo

Received on Tuesday, 17 August 2010 15:44:36 UTC