Opacidad del color de fondo, pero no el texto

¿Cómo hago que la transparencia entre navegadores (incluida Internet Explorer 6) para el fondo de un div mientras el texto permanece opaco?

Necesito hacerlo sin utilizar ninguna biblioteca como jQuery, etc. (Pero si conoce una biblioteca que lo haga, me gustaría saberlo para poder ver su código).

¡Usa rgba!

 .alpha60 { /* Fallback for web browsers that don't support RGBa */ background-color: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background-color: rgba(0, 0, 0, 0.6); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; } 

Además de esto, debe declarar el background: transparent para navegadores web IE, preferiblemente servido a través de comentarios condicionales o similar.

a través de http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Yo uso un PNG transparente alfa para eso:

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

Para IE6, necesitarías usar un arreglo PNG ( 1 , 2 ), sin embargo.

Creé ese efecto en mi blog Landman Code .

Lo que hice fue

 #Header { position: relative; } #Header H1 { font-size: 3em; color: #00FF00; margin:0; padding:0; } #Header H2 { font-size: 1.5em; color: #FFFF00; margin:0; padding:0; } #Header .Background { background: #557700; filter: alpha(opacity=30); filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.3; 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; } 
  

Relajando su requisito para trabajar en IE6 y navegadores heredados que puede usar :: before and display: inline-block

 div { display: inline-block; position: relative; } div::before { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; background:red; opacity: .2; } 

Demostración en http://jsfiddle.net/KVyFH/172/

Funcionará en cualquier navegador moderno

Gracias @ davy-landmann por https://stackoverflow.com/a/638064/417153 . ¡Eso es lo que estaba buscando! Mismo efecto con el código LESS:

  @searchResultMinHeight = 200px; .searchResult { min-height: @searchResultMinHeight; position: relative; .innerTrans { background: white; .opacity(0.5); min-height: @searchResultMinHeight; } .innerBody { padding: 0.5em; position: absolute; top: 0; } }