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 el complemento 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 incluyen efectos de doble exposición en fotografía y superposiciones de color semitransparentes detrás del texto.
La propiedad opacity se usa en transiciones de aparición y desaparición gradual, combinada con transition o @keyframes.