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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
se puede aplicar a ala imagen tambien?
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
opacitya dicha imagen o a su contenedor.Fantástico tutorial, me ha servido muchísimo. GRACIAS!!