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>
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
opacity
a dicha imagen o a su contenedor.Fantástico tutorial, me ha servido muchísimo. GRACIAS!!
Gracias! me ha servido de ayuda para lo que estoy haciendo