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

[berkeleyPunk]

Iniciado por pzin

¿No has probado a usar el filtro que te dije en vez del filtro de opacidad de IE?

Carajo!

Lo hice cuando lo posteaste, el resultado fue un feo degradado sin transparencia. Así que lo soslayé.

Ahora lo acabo de probar otra vez, como dices, por si acaso, y funciona a la pura perfección. ¿Qué pasó? No sé. Pero creo que lo probé en un HTML no anidado.
Muestro cómo quedo todo:

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:rgba(0,0,102,.5);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#30111111,endColorstr=#30111111);}
         
      #capaTransparente div {
          position:relative;        // Extrañamente, hay que posicionar el elemento para que la transparencia funcione.
          opacity:1;
          filter:alpha(opacity=100);}
 

Código HTML:

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

Gracias PZIN, ahora sí funciona en Firefox e Internet Explorer 8.

PD. Muchos se quejan de que IE sea una lata, y que por él, los programadores y diseñadores web (yo no me incluyo porque yo no soy nadie en programación) tienen que quebrarse la cabeza para programar. Yo creo que tienen razón en cierto sentido, pero no absolutamente. Porque sin las prácticas monopólicas de IE (que ya no son tan monopólicas porque IE ha ido perdiendo mucho terreno frente a Firefox y Chrome), el mundo web sería más facilón, no habría obstáculos. Pero son éstos lo que le da sabor a la vida web, los retos. ¿A poco no?

Saludos, y a ver si no regreso de nuevo a preguntar: ¿cómo hacer que funcione la transparencia en Opera y Safari?