David Hucklesby wrote:
>> One way to do this might be to use two DIVs, one superimposed over
>> the other. If one DIV has a background color and a fractional
>> opacity, while the
>> overlaid DIV has the text and (default) transparent background, I
>> think that may work:
>>
>> HTML
>> <div class="background"><!-- --></div>
>> <div class="foreground"><p>Some text here ... </p></div>
>>
>> CSS
>> .background {
>> height: 10em; /* or ??? */
>> background-color: #fff;
>> opacity: 0.6;
>> }
>> .foreground {
>> margin-top: -10em;
>> color: #000;
>> }
>>
>> Haven't tried this, though. :)
>>
> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
>
> Okay. I just tried my suggestion.
>
> Works in IE 6/7 and Opera.
> Fails in Moz/ FF/ NS7 and Safari. (Text is semi-opaque too.)
IE doesn't understand opacity. period.
Opera does something wrong with the layering.
Safari and Gecko: the 'background' div is layered above the
'foreground' div, and gives the impression of fading the 'foreground'
div. That is the correct thing to do. The div with 'opacity'
establishes a new stacking context. See
<http://www.w3.org/TR/CSS21/zindex.html#painting-order>
(Opacity is not mentioned there, as it is not part of CSS 2.1, but
the equivalent of this doc for CSS 3 would mention this [1]).
To get what you intended you'll have to give the 'foreground' div its
own stacking context, using position relative and z-index.
Demo:
<http://dev.l-c-n.com/_temp/opacity-test.html>
(Opera still gets some stacking wrong; I don't attempt to fix IE -
use on of them proprietary filters).
[1] http://archivist.incutio.com/viewlist/css-discuss/69890
Philippe
---
Philippe Wittenbergh
<http://emps.l-c-n.com>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
