¿cómo hacer efecto trasparencia al fondo no al texto de un div?

[berkeleyPunk]

Iniciado por pzin

Usa los filtros de Microsoft...

Increíblemente he logrado que Internet Explorer (8) haga lo que quiero, pero no Firefox!

Es decir, que el fondo de un div sea semitransparente pero NO su contenido.

PZIN, RGBA() sirve a la perfección para dar transparencia al div y no al contenido. El problema es que sirve en Firefox no en IE. Para dar el mismo efecto en IE, necesito usar el atributo filter:alpha(opacity=50). Y este atributo no funciona si declarmos RGBA(). Para que funcione el filter, hay que poner el color en RGB().


Básicamente la pregunta sigue siendo la misma, pero más específica: ¿cómo hacer semi-transparente el fondo de un div, pero no su contenido, tanto en Firefox como en Internet Explorer?

He aquí lo que llevo:

Código HTML:

<div id="capaFondo">
    <div id="capaTransparente">
      <div>Este texto debe ser negro sólido, SIN transparencia.</div>
    </div>
  </div>
 

Código CSS:

#capaFondo {
      width:150px;
      height:350px;
      background-color:gray;}
  #capaTransparente {
      width:300px;
      height:200px;
      font-size:40px;
      z-index:1;
      color:black;    
 
      background-color:blue;
      filter:alpha(opacity=50); }
      
  #capaTransparente div {
      position:relative;        // Extrañamente, hay que posicionar el elemento para que la transparencia funcione.
      opacity:1;
      filter:alpha(opacity=100);}