Opacidad
Valor que indica cuánto una capa o elemento oculta el contenido debajo. Va de 0% (completamente transparente) a 100% (completamente opaco).
La opacidad mide cuánto una capa o elemento de interfaz bloquea el contenido detrás de él, expresada como porcentaje de 0% (completamente transparente) a 100% (completamente opaco). Es la inversa de la transparencia: 70% de opacidad equivale a 30% de transparencia.
La opacidad y los canales alfa están relacionados pero operan a diferentes niveles:
- Opacidad: Se aplica uniformemente a toda una capa o elemento. Ejemplos incluyen el deslizador de opacidad de capa de Photoshop y la propiedad CSS
opacity - Canal alfa: Controla la transparencia por píxel, incrustado directamente en los datos de imagen
CSS proporciona dos enfoques para la transparencia:
opacity: 0.5- Hace todo el elemento (incluyendo hijos) semitransparente. El texto y los elementos hijos se vuelven translúcidos juntosbackground-color: rgba(0, 0, 0, 0.5)- Solo el fondo se vuelve semitransparente mientras el texto permanece completamente opaco
En editores de imagen, reducir la opacidad de capa la mezcla con las capas inferiores. Las aplicaciones comunes incluyen efectos de doble exposición en fotografía y superposiciones de color semitransparentes detrás del texto para mejorar la legibilidad.
Desde la perspectiva del rendimiento, los cambios de opacity son acelerados por GPU, haciéndolos ideales para animaciones comparados con alternar visibility o display. Esta propiedad es la base de las transiciones de aparición y desaparición gradual en la web. Combinada con transition o @keyframes, las animaciones de opacidad logran un renderizado suave a 60fps sin provocar recálculos de diseño.