Cross-Browser CSS Transparency with Opaque Content

Is it possible to make a transparent div with opaque text and images in it?

Asked by Alex van den Hoogen a Freelance Designer from the Netherlands

I have build a website which has a variable background. However I want to use div’s that are transparent. This works, but when I want to use images in those div’s they are transparent too, which gives an very strange effect.

Thus my question is, is it possible to make a transparent div with opaque text and images in it?

CSS Transparency applied to a parent div is inherited to all its children

This cannot be removed by declaring styles specific to the children. Using png images as background images for content-heavy areas may not be the best idea and wont work smoothly cross-browser.

The best solution is to seperate the content and background into seperate DIVs and apply a position:relative to the DIV holding the content. This is done within the parent element that then appears to have a translucent background.

The Bits&Pixels blog demonstrates this effect

Source: http://bitsamppixels.com/2008/02/11/cross-browser-transparent-columns/
<div id=”column-1″ class=”container”>
<div class=”overlay”></div>
<div class=”content”>
<h2>Content</h2>
</div>
</div>

…Set the container to position: relative; float: left;
this allows the parent to contain all children if they are floated.

css#column-1 {
position: relative;
float: left;
width: 500px; /* remember to set a width */
}

Not let’s take care of the transparency on the “overlay”-div.

css.overlay{
position: absolute;
top: 0; /* These positions makes sure that the overlay */
bottom: 0; /* will cover the entire parent */
left: 0;
width: 100%;
background: #000;
opacity: 0.65;
-moz-opacity: 0.65; /* older Gecko-based browsers */
filter:alpha(opacity=65); /* For IE6&7 */
}

.content {
position: relative; /* Moves the Text above the transparency */
}

Check out the rest of the tutorial to find out how to make it work in IE6. You can find it here.
Demo Page