La propiedad opacity

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 propiedad opacity

La sintaxis de la propiedad opacity es la siguiente:

Para indicar la opacidad podemos indicar tanto valores numéricos entre 0 (completamente transparente) y 1 (completamente visible), pasando por valores como 0.25 o 0.75. Si lo preferimos, podemos usar valores porcentuales entre 0% (completamente transparente) y 100% (completamente visible):

.red-block {
  background-color: #ff0000;
  color: #ffffff;

  opacity: 0.5;
  opacity: 50%;   /* Equivalente a la anterior */
}

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 {
  background-color: rgb(255 0 0 / 50%);
  color: white;
}

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.