Es posible utilizar la propiedad opacity
para establecer una opacidad (transparencia total o parcial) sobre el elemento indicado y todos los elementos hijos que contiene.
La sintaxis de la propiedad opacity
es la siguiente:
Propiedad | Valor | Significado |
---|---|---|
opacity |
Establece una transparencia con un valor del 0 al 1 (permite decimales). |
|
opacity |
Establece una transparencia con un valor del 0% al 100% . |
Para indicar la opacidad podemos indicar tanto valores numéricos 0
(completamente transparente) y 1
(completamente visible), pasando por valores como 0.25
o 0.75
. Si lo preferimos, podemos usar valores porcentuales 0%
(completamente transparente) y 100%
(completamente visible):
.red-block {
width: 100px;
height: 100px;
background-color: #ff0000;
color: #ffffff;
opacity: 0.5;
opacity: 50%; /* Equivalente a la anterior */
}
<div class="red-block"></div>
Como se puede ver en la imagen, el efecto del .red-block
(recuadro rojo) puede conseguirse tanto con opacity
como usando un background: rgb(255, 0, 0, 50%)
, sin embargo, la diferencia está en que si tenemos texto en su interior, con opacity
también se verá semitransparente, sin embargo con background
con canal alfa solo afectará al fondo, por lo que el texto mantiene su opacidad original.
.element {
width: 100px;
height: 100px;
background-color: rgb(255 0 0 / 50%);
color: white;
}
<div class="element"></div>
Recuerda que la propiedad opacity
afecta al elemento indicado y a todos sus hijos. Existen unas formas de modificar la opacidad, con ciertos matices:
Utiliza un canal alfa en el color de fondo si quieres aplicarlo sólo al elemento en cuestión, de modo que se vea el fondo (por ejemplo, una imagen de fondo) sin que afecte al contenido directamente.
Es posible utilizar la función opacity()
de la propiedad transform
, la cuál se puede acumular y sumar junto a otras funciones de transformación.
Otra opción, podría ser utilizar un ::before
o un ::after
para mantener los elementos separados (contenido del contenedor) y aplicarle una función opacity()
que sólo afecte al que nos interese. Al no estar uno dentro de otro, no afectará al otro.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev