Re: Opacity
- From: "Nik Coughlin" <nrkn.com@xxxxxxxxx>
- Date: Wed, 16 May 2007 12:53:36 +1200
Ben C wrote:
On 2007-05-13, Paul Wake <wakeMYFINGER@xxxxxxxxxxxx> wrote:
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 <p> with 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.
Doesn't work in IE6:
http://www.nrkn.com/3ColEqual/test.html
.
- References:
- Opacity
- From: Paul Wake
- Re: Opacity
- From: Paul Wake
- Re: Opacity
- From: Ben C
- Opacity
- Prev by Date: Re: Opacity
- Next by Date: Re: Centering table caption
- Previous by thread: Re: Opacity
- Next by thread: css page breaks
- Index(es):
Relevant Pages
|
