Stylesheets - Dark font in spite of opacity

Author

Dark font in spite of opacity

Rudi Hausmann

2007-04-23, 6:16 am

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.

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?

Thanks

Rudi

Ben C

2007-04-23, 6:16 am

On 2007-04-23, Rudi Hausmann <rudi527@nospam.com> wrote:
> 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.

Rudi Hausmann

2007-04-23, 6:16 am

Ben C wrote:
> On 2007-04-23, Rudi Hausmann <rudi527@nospam.com> wrote:
>
> Do you mean you want the background to be transparent, but the text
> opaque?

Exactly.

>
> 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.

Later on I want to drag and drop the elements. Therefor I do better not
divide the elements into two or three parts and live with the whole box
being blended.

The use case by the way: I have a lot of boxes representing dates/events
during a day. When the boxes overlap it should be visible. Transparency
would be nice. But maybe I make some overlaying divs in the overlapping
zone. Or I just display a warning text somewhere (a special background
or so) when overlapping occurs. This was the easies solution.

Jukka K. Korpela

2007-04-23, 6:16 pm

Scripsit Ben C:

> Note that opacity is CSS 3 but is reasonably well supported.

I wouldn't call it reasonably well supported when IE, the most widely used
browser, has no support to the property. IE has its own code for setting
opacity, though: after
opacity: 0.7;
you would add
filter: alpha(opacity=70);
which deviates from the CSS 3 drafts but is the practical author's choice.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Ben C

2007-04-23, 6:16 pm

On 2007-04-23, Jukka K. Korpela <jkorpela@cs.tut.fi> wrote:
> Scripsit Ben C:
>
>
> I wouldn't call it reasonably well supported when IE, the most widely used
> browser, has no support to the property. IE has its own code for setting
> opacity, though: after
> opacity: 0.7;

Good you pointed that out. I thought I heard somewhere IE did support
it.

> you would add filter: alpha(opacity=70); which deviates from the CSS 3
> drafts but is the practical author's choice.

zzpat

2007-04-23, 6:16 pm

Rudi Hausmann wrote:

>
> Later on I want to drag and drop the elements. Therefor I do better not
> divide the elements into two or three parts and live with the whole box
> being blended.
>

How about something like this?

..bg {
position: relative;
top: 0em;
opacity: 0.5;
filter: alpha(opacity=70);
width: 4.5em;
background : yellow;
}
..text {
position: relative;
top : -1.3em;
width: 2.6em;
overflow: hidden;
white-space: nowrap;
padding : 0 .6em;
}

<div class="bg"> </div>
<div class="text">Johanna from Orleans</div>

The color you're using was nasty so I changed it to yellow in this demo.
I also added some padding which increases the width. I also changed
everything to em.

If you want the text to lie flat within the colored background, change
top: 1.3em to 1em.