Opacità e trasparenza RGBA

La proprietà opacity imposta la trasparenza dell'intero elemento, inclusi i relativi elementi figli e contenuti. I valori vanno da 0 (completamente trasparente) a 1 (completamente opaco).

Una precisazione importante: opacity influisce sull'intero albero dell'elemento. Testo, immagini ed elementi figli all'interno di un elemento con opacity: 0.5 risultano tutti trasparenti al 50%: non è possibile rendere i figli più opachi del genitore.

Per rendere trasparente solo il colore di sfondo senza influire sul testo o sugli elementi figli, utilizzi rgba() invece di opacity:

Utilizzi questo modello mentale:

• opacity: 0.5 — l'intero elemento e i suoi figli diventano trasparenti
• rgba(r,g,b,0.5) — solo il valore del colore è trasparente; gli elementi figli non vengono influenzati

Lo stesso principio si applica a hsla(). Il quarto argomento è il canale alpha (0–1):

Il CSS moderno consente di utilizzare un separatore con barra per l'alpha in rgb() e hsl(), senza la variante con la "a":

Tutti e tre nascondono gli elementi, ma in modo diverso:

• opacity: 0 — l'elemento è invisibile, ma occupa ancora spazio ed è cliccabile
• visibility: hidden — l'elemento è invisibile, occupa spazio, ma non è cliccabile
• display: none — l'elemento viene rimosso completamente dal layout

Poiché opacity viene composta dalla GPU, è una delle proprietà CSS meno costose da animare. Per gli effetti di dissolvenza in entrata e in uscita, utilizzi sempre transizioni su opacity anziché su background-color.

Per assegnare a un elemento uno sfondo traslucido mantenendo il testo completamente leggibile, utilizzi rgba() su background-color:

Utilizzi RGBA in border-color e box-shadow per creare effetti discreti e trasparenti:

Il testo con opacità ridotta è meno leggibile e potrebbe non rispettare i requisiti WCAG sul contrasto dei colori. Verifichi sempre i rapporti di contrasto quando utilizza la trasparenza sul testo. Si assicuri che il rapporto sia almeno 4.5:1 per il testo normale.

Un elemento ha opacity: 0.3. Che cosa accade al testo al suo interno?

opacity rende trasparenti l'intero elemento e i relativi elementi figli. Utilizzi rgba() o hsla() per colori trasparenti senza influire sugli elementi figli. Le transizioni di opacity sono accelerate dalla GPU e offrono buone prestazioni. Controlli sempre i rapporti di contrasto quando utilizza la trasparenza sul testo.