Opaque text on translucent background

Hi,

I'm trying to figure out the CSS for opaque text on a translucent background in Mozilla.  Here's a well-written page (not my work) that shows what I want: http://www.domedia.org/oveklykken/css-transparency.php

The code shown on that page does produce opaque text in IE but not Firefox.  Any suggestions on what to change so it will also work in Firefox?
LVL 7
brgivensAsked:
Who is Participating?
 
lombardpCommented:
If you could accept to repeat two times the text in the box, there is a quite simple workaround: basically you have two identical DIV with the same content, one will have translucent background and will be placed under the second DIV, that have transparent background and no opacity, it means that text in this DIV is opaque.

The effect is exactly what you want, and works also in Mozilla/Firefox. The bad aspect is that you have to repeat two times its content.

<html>
<head>
<style>

body { background-color: #99cc99; }

.reldiv { position: relative; }

.alphabkg {
   position: absolute;
   z-index: 1;
   background-color: #ffffff;
   filter:alpha(opacity=50);
   opacity: 0.5;
   padding: 10px;
}

.toptext {
   background-color: transparent;
   position: absolute;
   z-index: 2;
   padding: 10px;
}

</style>
</head>
<body>

<div class="reldiv">

   <div class="alphabkg">
      This is a normal text<br />
      on a translucent background
   </div>

   <div class="toptext">
      This is a normal text<br />
      on a translucent background
   </div>

</div>

</body>
</html>


0
 
StormyWatersCommented:
If you read that page:
"-moz-opacity and opacity lets all the children of the styled container inherit the transparency, can't find a way around this."
0
 
GrandSchtroumpfCommented:
You can use a translucent PNG image as background, that works great in all browsers except for IE.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
seanpowellCommented:
To use the example posted in the link you gave, just stop the text div from being a child.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<style type="text/css">

#transbox
{
      width:400px;
      height:300px;
      background:url(leaf.gif) no-repeat;
      padding:10px;
      position:relative;
}

#white
{
      width: 380px;
      height: 280px;
      background-color: #ffffff;
      filter:alpha(opacity=50);
      -moz-opacity:0.5;
      opacity: 0.5;
}

#text
{      
      font: bold 23px verdana, sans-serif;
      color: #000000;
      position:absolute;
      top: 20px;
      left: 20px;
      width: 360px;
}

</style>
</head>

<body>

<div id="transbox">
      <div id="white"></div>
      <div id="text">50% Lorem ipsum dolor sit amet, consectetuer adipiscing etc. etc.</div>
</div>

</body>
</html>

Sean
0
 
brgivensAuthor Commented:
I appreciate the input, but I need a solution that uses neither an image nor absolute positioning.  Because of the complexity of the page I really need to be able to simply set a property of the child object to adjust its opacity.
0
 
GrandSchtroumpfCommented:
Well, you really need something that is not supported.
I have played with translucent backgrounds a lot and i can tell you for sure that the easiest solution is to use a PNG background image for all browsers except IE and to use http://www.domedia.org/oveklykken/css-transparency.php for IE.
0
 
lombardpCommented:
I agree with GrandSchtroumpf, there is no direct way to do it.

It's up to you. You can add the complexity of the suggested solutions to an already complex page, or you can simplify other parts of the page and add this new complexity, or you can renounce to this effect.

In my opinion:

- The solution suggested by GrandSchtroumpf is the best for you, since it will add the lowest complexity to page layout. You only need to use different techniques to obtain translucency (IE with filters, other browsers with alpha transparent PNG images).

- Sean solution is elegant and CSS only. You only need to know the final width and height of the DIV block.

- My solution is CSS only, you don't need to know DIV size. You only need to repeat twice the DIV content.


0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.