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/