Re: CSS Opacity

On Saturday 2007-04-28 15:25 -0400, Zoffix Znet wrote:
> Consider this example (perhaps with some scripting involved):
> 
> You want to show a photo in the middle of the page and make the rest of
> the page semi-transparent.
> 
> body { opacity: .5; }
> 
> Will make the photo semi-transparent as well.
> 
> #photo { opacity: 1; }
> 
> Will not fix this.

What you want is considerably more complicated than you think.

In order for an override like this to be effective, opacity would
need to be an inherited property.  (Instead, opacity is not
inherited, but represents group opacity:  the entire subtree is
drawn into a buffer which is then composited, as a whole, with the
specified opacity, onto its parent.)

But if opacity were inherited, than anything in the page that
involved one background covering another would have the covered
background should partly through the thing that was supposed to
cover it.  In other words, the idea of "covering" would stop working
in all of the part of the page that you were trying to dim.

-David

-- 
L. David Baron                                <URL: http://dbaron.org/ >
           Technical Lead, Layout & CSS, Mozilla Corporation