[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1585
  • Last Modified:

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?
0
brgivens
Asked:
brgivens
3 Solutions
 
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
 
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now