On 2007-05-13, Paul Wake <wa**********@x mission.comwrot e:
I never did figure out how to bring the text up to full opacity over a more
transparent background (I tried z-index divs, etc. to no avail), but by upping
the opacity the text shows better than it was.
You can do it like this:
1. Remove background-color and opacity from your selector for #opaque.
2. Add to the selector for #opaque "position: relative; z-index: 0"
3. Create a new selector:
#curtain
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: white;
opacity: 0.35;
z-index: -1;
}
I've reduced the opacity to 0.35 to make the effect more obvious.
4. In the content, just after where you open <div id="opaque"add :
<div id="curtain"></div>
This way the semi-opaque "curtain" is inserted behind the text, but the
text is not painted onto the curtain (which would make it 0.35 opacity
together with it), but into its <pwith default transparent background
and fully opaque foreground stacked on top of the curtain.
#opaque (not a good name by the way) is position: relative so it becomes
the containing block for the curtain, which uses top, bottom, left and
right of 0 to locate it inside its containing block.
z-index is necessary because absolutely positioned descendents are
usually stacked above normal flow descendents. Note also that we have to
make #opaque z-index: 0 so that it establishes the stacking context for
#curtain. This means #curtain goes behind other things _within #opaque_.
Otherwise z-index: -1 could put it behind things higher in the document
with the result you might not see it at all.
