Opacity of background not text

Question

Anyone know how to make cross-browser (inc IE 6) transparancy of background of DIV while the text remains opaque?

I need to do it without using any library such as jQUery etc. (but if you know of a library that does it I'd love to know so I can look at their code).

Answer 1

I use an alpha-transparent PNG for that:

div.semi-transparent {
  background: url('semi-transparent.png');
}

For IE6, you'd need to use a PNG fix (1, 2), though.

Answer 2

I've created that effect on my blog Landman Code.

What I did was:

<div id="Header">
  <div class="Background">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
  <div class"Foreground">
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
</div

than use the following css:

#Header
{
   position: relative;
}
#Header H1
{
   font-size: 3em;
   color: #00FF00;
}
#Header H2
{
   font-size: 1.5em;
   color: #FFFF00;
}
#Header .Background
{
   background: #557700;
   filter: alpha(opacity=30);
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
   opacity:0.3;
   -moz-opacity: 0.30; 
   zoom: 1;
}
#Header .Background *
{
   visibility: hidden; // hide the faded text
}
#Header .Foreground
{
   position: absolute; // position on top of the background div
   left: 0; 
   top: 0;
}

The important thing that every padding/margin and content must be the same in both the .Background as .Foreground.