transparency and text problem

Question

I'm playing with the opacity CSS attribute.

It works nicely for the box (with at 50% or black at 30%) - the problem is that the text inside the box is also transparent.

I would like the text to be 100% white in a box with at 30% transparency.

The solution is to use CSS with tweaks or to use a .png for the background and to forget the opacity setting.

Tell me, how to do 30% opacity with 100% opacity text inside.

Thanks in advance

Answer 1

Your choices are:

• Using CSS3: background: rgba(255, 255, 255, 0.3). Live Demo
• Absolutely position two <div> tags on top of each other. One of them is the background, and has the opacity setting. The second one has the text in it, and a transparent background.
• As you hinted at in your question, you could use a .png file with 30% transparency.

---

I knew I'd read about a way to make the rgba work in IE.

See: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Answer 2

#box { color:white; background-color:rgba(0,0,0,0.3); } 

Note: rgba does not work in IE6-8