469,344 Members | 5,990 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,344 developers. It's quick & easy.

Dark font in spite of opacity

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
Apr 23 '07 #1
5 6709
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.
Apr 23 '07 #2
Ben C wrote:
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?
Exactly.
>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.
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.
Apr 23 '07 #3
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/

Apr 23 '07 #4
On 2007-04-23, Jukka K. Korpela <jk******@cs.tut.fiwrote:
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;
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.
Apr 23 '07 #5
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">&nbsp;</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.

Apr 23 '07 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

133 posts views Thread by Philipp Lenssen | last post: by
55 posts views Thread by Haines Brown | last post: by
2 posts views Thread by chart43 | last post: by
1 post views Thread by VR | last post: by
60 posts views Thread by deko | last post: by
23 posts views Thread by Schannah | last post: by
15 posts views Thread by Sunny | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.