alpha baggrund

Brug en halvtransparant PNG.

#dit_element {
  background: url("50procent.png");
}

* html #dit_element { // IE6 specifikt, ovenstående virker i andre nye browsere.
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='50procent.png', sizingMethod='scale');
  background: none;
}

Der er mere om AlphaImageLoader på http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp

//hermandsen

-- og ellers skal du bruge to forskellige elementer, der ligger ovenpå hinanden !-)

>>roenving
Det vil ikke virke, da opacity-egenskaben sætter gennemsigtighed for sig selv og alle dens under-elementer.
http://www.w3.org/TR/css3-color/#transparency

"Conceptually, after the element (including its children) is rendered into an RGBA offscreen image..."

Jepz, derfor skal det, der ikke skal have egenskaben ligge som et selvstændigt element _ovenpå_ det, der har (baggrunds-)billedet !-)

Arh, noget ala:
<div style="height: 30px; opacity: 0.5; background: red;"></div>
<div style="height: 30px; margin-top: -30px;">Weeeee!!!</div>

Helt sikkert en løsning!! :)

Netop !-)

-- eller:

<div style="position relative;">
  <img style="width:400px;height:300px;opacity:0.5">
  <div style="position:absolute;padding:50px;width:400px;height:300px;top:0;left:0;">Tekst ovenpå billedet</div>
</div>