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.

4 thoughts on “Divs transparentes de contenido opaco con CSS3: opacity y RGBA

    1. Juan de la Cruz Post author

      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.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *