Opaque Content on Translucent Backgrounds

Sure, image backgrounds aren't recommended unless you know what you're doing, but what if you wanted a semi-transparent div that dimmed the image background a bit, but kept its content opaque? You use CSS' filter/opacity property, of course. But it turns out that sticking an opacity 1 div inside a transparent div doesn't work. I had that same problem some time ago.

At the time I found that people either recommend to use translucent PNG images or positioning tricks, both of which I didn't feel like using. So after a while of messing around with my code I came up with this fairly easy solution.




What I did there is place an empty div inside the div I want to have a translucent/semi-transparent background. It's like adding a screen or a pane of frosted glass behind the div. To make it clearer let's have a look at the html code:

<div class="content">
This text is opaque
<div class="screen"></div>
</div>

Now for the css that turns that 'screen' transparent.

.content
{
position:relative;
background:transparent;
}

.screen
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
background-color:white;
opacity:0.5;
filter:alpha(opacity=50);
}

What we did there is first make the content div completely without a background (background:transparent) so we can slip the 'screen' under it. We also have to set its position to something other than static.

Then, we take the screen div and absolute position it, so it doesn't touch the positions of other stuff inside our content div, and place it at the top-left. We 'spread' it to the content's full size with width and height set to 100%, and to be sure it stays under everything we set z-index to -1. Finally we give it a color background (don't worry, this'll be transparent) and set opacity to 50%.

And there we have it! It's a bit clunky, but it works.

Suggestions for improvement? Complaints? Just post a comment. :)