Guida CSS interattiva: Opacity

Q: Cosa fa opacity in CSS?

Imposta quanto è trasparente un elemento, da 0 (del tutto trasparente) a 1 (del tutto opaco). Si applica all'intero elemento, compresi testo, bordo, immagini e ogni figlio, come un unico livello.

Q: Come rendo trasparente solo lo sfondo e non il testo?

Lascia stare opacity e dai allo sfondo un colore con canale alfa: background-color: rgb(37 99 235 / 0.5); oppure rgba(37, 99, 235, 0.5). Il testo e i figli restano del tutto opachi.

Q: Qual è la differenza tra opacity: 0, visibility: hidden e display: none?

opacity: 0 nasconde l'elemento, ma questo occupa ancora spazio, si può cliccare e viene letto dagli screen reader. visibility: hidden mantiene lo spazio ma non è cliccabile né letto. display: none lo toglie del tutto dal layout.

Q: opacity può essere una percentuale?

Sì. opacity: 50% equivale a opacity: 0.5 in tutti i browser attuali. I valori sotto 0 o sopra 1 vengono riportati in quell'intervallo.

Cosa fa opacity

opacity imposta quanto è trasparente un elemento: 1 è pieno (il valore predefinito), 0 è invisibile, e qualsiasi valore intermedio lascia trasparire lo sfondo. I riquadri qui sotto stanno su uno sfondo a strisce, così puoi vederlo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Opacity</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .bg {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: repeating-linear-gradient(45deg, #e5e7eb 0 10px, #ffffff 10px 20px);
    }
    .box { width: 90px; height: 70px; background: #2563eb; color: white; display: grid; place-items: center; font-weight: 700; }
  </style>
</head>
<body>
  <div class="bg">
    <div class="box" style="opacity: 1">1</div>
    <div class="box" style="opacity: 0.75">0.75</div>
    <div class="box" style="opacity: 0.5">0.5</div>
    <div class="box" style="opacity: 0.25">0.25</div>
    <div class="box" style="opacity: 0">0</div>
  </div>
</body>
</html>

L'ultimo riquadro c'è ancora: occupa il suo spazio di 90px nella riga, semplicemente non disegna niente. Nota che i numeri bianchi sbiadiscono insieme ai riquadri. opacity si applica all'elemento e a tutto ciò che contiene.

Sfondo trasparente, testo pieno

Siccome opacity sbiadisce anche i figli, è lo strumento sbagliato per "uno sfondo trasparente dietro un testo leggibile". Usa invece un colore di sfondo con canale alfa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background alpha</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .bg { padding: 16px; background: repeating-linear-gradient(45deg, #f59e0b 0 10px, #ffffff 10px 20px); }
    .card { padding: 14px; margin-bottom: 10px; color: #111827; font-weight: 700; }
    .with-opacity { background: #ffffff; opacity: 0.6; }
    .with-alpha { background: rgb(255 255 255 / 0.6); }
  </style>
</head>
<body>
  <div class="bg">
    <div class="card with-opacity" id="a">opacity: 0.6 (text fades too)</div>
    <div class="card with-alpha" id="b">background alpha 0.6 (text stays solid)</div>
  </div>
  <p id="out"></p>
  <script>
    const s = (id) => getComputedStyle(document.getElementById(id));
    document.getElementById('out').textContent =
      'first: opacity ' + s('a').opacity + '  |  second: opacity ' + s('b').opacity + ', background ' + s('b').backgroundColor;
  </script>
</body>
</html>

Entrambi i pannelli bianchi lasciano vedere le strisce nella stessa misura. Nel primo, il testo sbiadisce insieme al pannello. Nel secondo è trasparente solo il colore di sfondo (rgb(255 255 255 / 0.6), uguale a rgba(255, 255, 255, 0.6)), quindi il testo resta pieno e facile da leggere. I colori con alfa sono trattati nella pagina sui colori.

Un figlio non può sfuggire all'opacità del genitore: opacity: 1 sul figlio non fa niente, perché il genitore viene disegnato come un unico livello sbiadito con il figlio già dentro.

Valori

Valore	Risultato
`1` o `100%`	del tutto opaco (predefinito)
`0.5` o `50%`	trasparente a metà
`0` o `0%`	del tutto trasparente, ancora nel layout e cliccabile
`1.5`, `-1`	riportati a `1` e `0`

L'opacità si eredita visivamente ma non come proprietà: l'opacity calcolata di un figlio resta 1, mentre viene disegnato dentro un genitore sbiadito.

opacity: 0 contro visibility: hidden contro display: none

Tutti e tre fanno sparire un elemento, ma differiscono in tutto il resto:

	`opacity: 0`	`visibility: hidden`	`display: none`
Occupa spazio	sì	sì	no
Riceve clic e focus	sì	no	no
Letto dagli screen reader	sì	no	no
Si può animare con transition	sì, in modo fluido	cambia a un'estremità, senza dissolvenza	no

La differenza che fa danni è la seconda riga. Un pulsante a opacity: 0 si può ancora cliccare e raggiungere con Tab:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden but clickable</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 10px; }
    .row button { width: 150px; height: 40px; font: inherit; }
  </style>
</head>
<body>
  <div class="row">
    <button id="o" style="opacity: 0">opacity: 0</button>
    <button id="v" style="visibility: hidden">visibility: hidden</button>
    <button id="d" style="display: none">display: none</button>
    <button id="shown">Visible</button>
  </div>
  <p id="out"></p>
  <script>
    const hit = (id) => {
      const r = document.getElementById(id).getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 10, r.top + 10);
      return id + ': ' + (top && top.id === id ? 'clickable' : 'not clickable');
    };
    document.getElementById('out').textContent = [hit('o'), hit('v')].join('  |  ') +
      '  |  the Visible button starts at x = ' + document.getElementById('shown').offsetLeft + 'px';
  </script>
</body>
</html>

Il riquadro chiede al browser quale elemento si trova sotto un punto dentro ogni pulsante nascosto. Il pulsante con opacity: 0 risponde "clickable"; quello con visibility: hidden no. Il pulsante Visible comincia dopo due spazi vuoti da 150px, perché il pulsante con display: none è l'unico che ha restituito il suo spazio. Per far sparire qualcosa in dissolvenza e poi toglierlo, anima opacity e imposta visibility: hidden alla fine.

Dissolvenza in hover

opacity è una delle proprietà più leggere da animare, quindi è il modo standard per far apparire e sparire le cose in dissolvenza. Una didascalia che compare sopra un'immagine:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover fade</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tile { position: relative; width: 240px; height: 150px; background: linear-gradient(135deg, #2563eb, #16a34a); }
    .caption {
      position: absolute;
      inset: auto 0 0 0;
      padding: 10px;
      background: rgb(17 24 39 / 0.8);
      color: white;
      opacity: 0;
      transition: opacity 0.25s ease-out;
    }
    .tile:hover .caption, .tile:focus-within .caption { opacity: 1; }
  </style>
</head>
<body>
  <a class="tile" href="#" style="display: block">
    <span class="caption">Caption appears on hover and focus</span>
  </a>
</body>
</html>

:focus-within mostra la didascalia anche a chi usa la tastiera. Tieni presente la tabella sopra: mentre è invisibile, la didascalia viene comunque letta dagli screen reader, ed è proprio ciò che vuoi per una didascalia.

Accessibilità: il testo sbiadito perde contrasto

Abbassare l'opacità abbassa il contrasto. Un testo grigio su bianco a opacity: 0.5 può scendere molto sotto il rapporto 4.5:1 richiesto per il testo normale. Per il testo secondario, scegli un colore che superi il controllo del contrasto invece di sbiadirne uno scuro. Per i controlli disabilitati, l'opacità ridotta è un segnale comune, ma abbinala all'attributo disabled, così il controllo è anche irraggiungibile da tastiera e annunciato come disabilitato.

Effetto collaterale: contesto di impilamento

Qualsiasi opacity sotto 1 crea un nuovo contesto di impilamento, come fa transform. I figli con uno z-index alto si impilano allora solo dentro l'elemento sbiadito e non possono salire sopra gli elementi esterni. Se un menu a tendina dentro un pannello sbiadito finisce sotto un altro elemento, il motivo è questo (la pagina su z-index spiega l'impilamento).

Errori comuni

Sbiadire una card per renderne trasparente lo sfondo. Sbiadisce anche il testo. Usa rgb(... / 0.5) sullo sfondo.
Cercare di rendere di nuovo opaco un figlio. L'opacità del genitore limita ogni figlio.
Nascondere solo con opacity: 0. L'elemento riceve ancora clic e focus. Aggiungi visibility: hidden, oppure usa display: none (pointer-events: none blocca i clic ma non il focus da tastiera).
Scrivere opacity: 50. L'opacità va da 0 a 1; 50 viene riportato a 1. Scrivi 0.5 o 50%.
Testo a basso contrasto per colpa dell'opacità. Controlla il contrasto del risultato, non del colore originale.

Domande frequenti

Cosa fa opacity in CSS?

Imposta quanto è trasparente un elemento, da 0 (del tutto trasparente) a 1 (del tutto opaco). Si applica all'intero elemento, compresi testo, bordo, immagini e ogni figlio, come un unico livello.

Come rendo trasparente solo lo sfondo e non il testo?

Lascia stare opacity e dai allo sfondo un colore con canale alfa: background-color: rgb(37 99 235 / 0.5); oppure rgba(37, 99, 235, 0.5). Il testo e i figli restano del tutto opachi.

Un elemento figlio può essere più opaco del genitore?

No. L'opacità del genitore si applica all'intero gruppo, quindi opacity: 1 su un figlio non può annullarla. Il figlio di un genitore a 0.5 viene disegnato al massimo a metà opacità. Sposta invece la trasparenza sul colore di sfondo del genitore.

Qual è la differenza tra opacity: 0, visibility: hidden e display: none?

opacity: 0 nasconde l'elemento, ma questo occupa ancora spazio, si può cliccare e viene letto dagli screen reader. visibility: hidden mantiene lo spazio ma non è cliccabile né letto. display: none lo toglie del tutto dal layout.

opacity può essere una percentuale?

Sì. opacity: 50% equivale a opacity: 0.5 in tutti i browser attuali. I valori sotto 0 o sopra 1 vengono riportati in quell'intervallo.

Concetti correlati