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.

3 comentarios en “Divs transparentes de contenido opaco con CSS3: opacity y RGBA

    1. Juan de la Cruz Autor del post

      Hola anabella,

      el ejemplo de esta entrada es para el color de fondo y se utiliza fundamentalmente para superponer a una imagen un div (que será el que tenga el fondo transparente) con texto.

      Para que una imagen tenga transparencia deberás aplicarle la propiedad opacity a dicha imagen o a su contenedor.

      Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *