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!

 

Child elements are unable to be opaque when the parent element is translucent.

You could use a pseudo element to contain the background image, and then position the pseudo element and make it translucent.

== EDIT ==
Deleted my above reply text because I misunderstood the OP.

 

Or, just use background-color with rgba() - rgb with transparency option. rgba(0,0,0,0.5) will be black with 50% transparency (ergo, grey).

Opacity is a bad choice.

 

Well... what PoPSiCLe says.

I didn't read your original post carefully and thought you wanted a translucent background image. My bad. If what you want is a translucent background color, then simply use rgba.