How do I have a transparent div with NON transparent text?

Question

I want to have a div that is semi opaque filled with text that is not opaque at all. My problem is that when I make the div semi opaque the text is semi opaque too. Is there way to have my text appear as it normally would?

Below is what I'm using now:

.opac
{
    opacity:.2;
    background-color:black; 
}

Answer 1

IIRC, you have to get tricky.

Essentially, you want to create the semi-transparent div, empty. Then put your text in another div and position it so it lies on top of the first.

Answer 2

No, there isn't.

Either use a semi transparent 24-bit PNG to create a semi transparent background for an opaque element, or layer two elements on top of each other.

Answer 3

Even though this has already been answered, here's another option that won't require images, but does require jQuery.

jQuery

var c = $('#container');
$('#transparent').css({
    width: c.outerWidth(),
    height: c.outerHeight(),
    top: c.offset().top,
    left: c.offset().left
});

CSS

​#transparent {
    background-color: black;
    position: absolute;
    z-index:-1;
    opacity: 0.2;
}

HTML

​<div id='container'>
Text
<div/>
<div id='transparent'>
</div>​

Try it out

http://jsfiddle.net/yEmUn/

Answer 4

You may use 2 DIVs (none of them either's child). The bottom layered DIV would be semi transparent and the top layered DIV would be for holding the text.