Tra le tante novità che la specifica del CSS3 ha introdotto, c’è la proprietà RGBa che ci consente di assegnare un valore di opacità ad un colore di sfondo in formato RGB. La prima reazione che ho avuto quando vidi per la prima volta questa proprietà fu di pensare a cosa potesse servire se già era presente la proprietà opacity.
Pensandoci bene, però, la differenza tra le due proprietà è sostanziale e non possono essere utilizzate come sostitute l’una dell’altra. Vediamo insieme perchè.
Innanzitutto vediamo come funzionano entrambe.
RGBa
La proprietà prende in ingresso quattro parametri, i tre valori del RGB e la percentuale di opacità:
view source print?
1
div { background-color: rgba(255,0,0,0.7); }
Opacity
La proprietà assegna all’oggetto un valore di trasparenza compreso tra 0 e 1.
view source print?
1
div { opacity: 0.7; }
Quale è la differenza tra le due però?
Mentre l’opacità imposta un valore di trasparenza all’elemento e tutto il suo contenuto, la proprietà RGBa imposta un valore di trasparenza all’oggetto, lasciando inalterato il valore degli elementi contenuti al suo interno.
Vediamo nel dettaglio di cosa si parla, fornendo degli esempi.
Avendo due box e, dando l’opacità ad uno dei due box, qualunque cosa contenuta all’interno eredita il valore di trasparenza, ottenendo un risultato come il seguente:
Come possiamo vedere, anche il testo contenuto all’interno eredita la trasparenza.
Utilizzando l’RGBa, invece, il risultato sarebbe il seguente:
Il testo, in questo caso, non eredita l’opacità e viene visualizzato correttamente. La trasparenza è data solo al colore di sfondo del div.
I due esempi sono disponibili ai seguenti link:
Pacman
Nostradamus
Magical Cat Adventure
Snake