Background Transparency with Opaque Text

I tried searching for a similar thread, but was unable to find anything.

I'm trying to make the backgrounds of my content divs 70% transparent using the following:

.transparency {
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

Unfortunately, this is also making the content within those divs use the same opacity. I tried nesting another div inside using the following:

.opaque-text {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
position: relative;
z-index: 2;
}

But it does not seem to be working. I feel like this should be a simple fix, and I'm missing something obvious. I know I can always use a .png as a background image, but I'm trying to do this in pure CSS if at all possible.

Thanks!

You can't do it as a child element. You will have to set the text outside the transparent part, and use something like absolute positioning or negative margins to get it inside. See this page for more information: http://css-tricks.com/non-transparen...rent-elements/

Wow, thanks for the response Morning! I hadn't found that article when I was searching for this.