Opacità in CSS

La proprietà opacity specifica l’opacità/trasparenza di un elemento.

Immagine Trasparente

La proprietà opacity può assumere un valore compreso tra 0,0 e 1,0. Più basso è il valore, più trasparente sarà l’elemento.

img {
  opacity: 0, 5;
}

Effetto di Hover Trasparente

La proprietà opacity è spesso utilizzata insieme al selettore :hover per cambiare l’opacità al passaggio del mouse:

img {
  opacity: 0, 5;
}

img:hover {
  opacity: 1, 0;
}

Box Trasparente

Quando si utilizza la proprietà opacity per aggiungere trasparenza allo sfondo di un elemento, tutti i suoi elementi figlio ereditano la stessa trasparenza. Questo può rendere difficile leggere il testo all’interno di un elemento completamente trasparente:

div {
  opacity: 0, 3;
}

Trasparenza utilizzando RGBA

Se non si vuole applicare l’opacità agli elementi figlio, come nell’esempio precedente, è possibile utilizzare valori di colore RGBA.

Nel capitolo sui colori CSS abbiamo visto che è possibile utilizzare RGB come valore di colore. Oltre a RGB, puoi utilizzare un valore di colore RGB con un canale alfa (RGBA), che specifica l’opacità per un colore.

Un valore di colore RGBA è specificato come: rgba(red, green, blue, alpha). Il parametro alpha è un numero compreso tra 0,0 (completamente trasparente) e 1,0 (completamente opaco).

div {
  background: rgba(76, 175, 80, 0.3); /* Sfondo verde con opacità al 30% */
}