Opacidad y transparencia RGBA

La propiedad opacity establece la transparencia de todo el elemento, incluidos sus elementos secundarios y su contenido. Los valores van desde 0 (totalmente transparente) hasta 1 (totalmente opaco).

Una advertencia importante: opacity afecta a todo el árbol de elementos. El texto, las imágenes y los elementos secundarios dentro de un elemento con opacity: 0.5 son transparentes al 50 %; no puede hacer que los elementos secundarios sean más opacos que su elemento principal.

Para hacer transparente solo el color de fondo sin afectar al texto ni a los elementos secundarios, utilice rgba() en lugar de opacity:

Utilice este modelo mental:

• opacity: 0.5 — todo el elemento y sus elementos secundarios se vuelven transparentes
• rgba(r,g,b,0.5) — solo el valor de color es transparente; los elementos secundarios no se ven afectados

El mismo principio se aplica a hsla(). El cuarto argumento es el canal alfa (0–1):

El CSS moderno permite usar un separador de barra para el alfa en rgb() y hsl() sin la variante con la "a":

Las tres opciones ocultan elementos, pero de forma diferente:

• opacity: 0 — es invisible, pero sigue ocupando espacio y se puede hacer clic en él
• visibility: hidden — es invisible, ocupa espacio y no se puede hacer clic en él
• display: none — se elimina completamente del diseño

Como opacity se compone en la GPU, es una de las propiedades CSS más económicas de animar. Los efectos de aparición y desaparición gradual siempre deben usar transiciones de opacity en lugar de background-color.

Para dar a un elemento un fondo translúcido y mantener el texto completamente legible, utilice rgba() en background-color:

Utilice RGBA en border-color y box-shadow para crear efectos sutiles y transparentes:

El texto con poca opacidad reduce la legibilidad y puede no cumplir los requisitos de contraste de color de WCAG. Compruebe siempre las relaciones de contraste cuando utilice transparencia en el texto. Asegúrese de que la relación mínima sea de 4.5:1 para el texto normal.

Un elemento tiene opacity: 0.3. ¿Qué ocurre con el texto que contiene?

opacity hace que todo el elemento y sus elementos secundarios sean transparentes. Utilice rgba() o hsla() para crear colores transparentes sin afectar a los elementos secundarios. Las transiciones de opacity se aceleran mediante la GPU y ofrecen un buen rendimiento. Compruebe siempre las relaciones de contraste cuando utilice transparencia en el texto.