On 2007-04-23, Rudi Hausmann <ru*****@nospam.comwrote:
Hi!
I want to "paint" some blocks with text in it. As the box can overlap I
want the text to be transparent using opacity. Though, the text shall
stay well visible.
Do you mean you want the background to be transparent, but the text
opaque?
Here is what I produced so far:
<div style="overflow: hidden; white-space: nowrap; opacity: 0.7; width:
50px; background-color: Fuchsia;">
<div style="color: Black; opacity: 1;"Johanna from Orleans </div>
</div>
I want the text of Johanna be totally dark. How to achieve this?
As you've discovered, opacity sets a blending level for a box and its
descendents altogether to be blended onto whatever they're stacked on
top of.
To get the effect you want, you will need to change the document
structure so that the text is no longer a descendent of the fuchsia
element. You can do this with an absolutely positioned div.
<div style="position: relative">
<div style="background-color: magenta;
height: 50px; opacity: 0.7">
</div>
<div style="position: absolute; top: 0; bottom: 0; color: black">
Johanna from Orleans
</div>
</div>
The second div has background: transparent (the default, so I haven't
set it).
So we have a magenta box blended into its background with opacity 0.7.
It has no descendents. Sitting on top of it is another box with a
transparent background and opaque foreground.
You can set the second div to opacity: 0.9 or something of course if you
want to.
We put the whole lot in a containing div with position: relative to
establish a containing block in the right place for the absolutely
positioned one. That extra container should have no padding set on it.
It might not be necessary to have this div depending on your actual
example.
Note that opacity is CSS 3 but is reasonably well supported.