Divs transparentes de contenido opaco con CSS3: opacity y RGBA

Cuando se empiezan a utilizar transparencias con CSS3 es frecuente que la propiedad opacity se aplique directamente al contenedor que queremos que sea transparente. Sin embargo, esta forma de conseguir la tansparencia tiene un efecto que en la mayoría de las ocasiones no será deseado, y es que todos sus elementos hijos tendrán la misma opacidad. Esto puede dificultar, por ejemplo, la legibilidad de los textos contenidos en un div semitransparente.

Para que los contenidos de los divs transparentes sean opacos, la opacidad del contenedor debemos establecerla en el canal alfa de su propiedad rgba.

Así, por ejemplo, con el siguiente código, los textos contenidos en un div que tuviera asignada la clase todo-transparente no se verían, mientras que los textos contenidos en un div de clase fondo-transparente-cont-opaco sí se verían.

<style type='text/css'>

/* El contenedor y todo su contenido tendrán una opacidad del 50%. */
div.todo-transparente {
    background-color: rgb(0, 0, 0); /* o background-color:#000000; */
    opacity: 0.5;
    color: #000;
}

/* Solo el fondo del contenedor tendrá una opacidad del 50%.
 * Su contenido será opaco 100%. */
div.fondo-transparente-cont-opaco {
    background-color: rgba(0, 0, 0, 0.5);
    color:#000;
}

</style>