Cambiar opacidad de elemento sin que afecte a sus hijos
En este tutorial aprenderemos cómo modificar la opacidad de un elemento en css sin afectar a sus hijos o a su contenido.
Para modificar la opacidad usamos la propiedad opacity, con valores entre cero y uno.
Veamos un ejemplo
<!--Elemento al que queremos aplicar la opacidad-->
<div class="contenedor">
<!--Elementos hijos-->
<p>Párrafo 1</p>
<p>Párrafo 2</p>
</div>
<!--Estilos Css-->
<style>
.contenedor{
background-color: blue;
opacity: 0.5;
}
</style>
El problema es que al utilizar la propiedad opacity para que el elemento contenedor tenga una transparencia de 0.5, ésto afecta al propio elemento y a todo su contenido, es decir, los hijos p también heredarán esa transparencia.
¿Cómo podemos hacerlo para que no afecte a los hijos?
El secreto para crear un efecto de opacidad en un elemento y que sus hijos no se vean afectados por ello es curiosamente no utilizar la propiedad opacity directamente. Debemos usarla como parámetro de un color RGBA.
El modo de color RGBA es una de las muchas novedades que nos trae CSS3 y no es más que la combinación de 3 colores a la que añadimos un valor más que es la opacidad, expresada entre 0 (transparente) y 1 (opaco). Ej: rgba(0,255,0,0.7); color verde con un 0.7 de opacidad.
Veamos un ejemplo
<!--Elemento al que queremos aplicar la opacidad-->
<div class="contenedor">
<!--Elementos hijos-->
<p>Párrafo 1</p>
<p>Párrafo 2</p>
</div>
<!--Estilos Css-->
<style>
.contenedor{
background-color: rgba(00,00,255,0.5);
}
</style>
En este caso la opacidad afectaría solamente al elemento de clase contenedor, no a sus hijos párrafo.
Si te ha gustado no olvides compartir en redes sociales.
[addthis tool=»addthis_inline_share_toolbox_6jt6″]
Espero que te haya servido. Cualquier duda deja un comentario. Un saludo