Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Colore RGBa

Definire il colore di un elemento in RGB e la sua trasparenza con il canale alfa
Definire il colore di un elemento in RGB e la sua trasparenza con il canale alfa
Link copiato negli appunti

Da sempre, nei CSS, è possibile definire un colore con una notazione RGB, impostando cioè un valore per ciascun componente della tripletta di colori che è alla base di questo modello: Rosso (Red), Verde (Green), Blue (Blue).

I valori possono essere espressi in percentuale:

body {background-color: rgb(100%, 100%, 100%)}

oppure usando una scala che va da 0 a 255:

body {background-color: rgb(255, 255, 255)}

Le due regole sono equivalenti, in entrambi i casi lo sfondo della pagina sarà bianco.

L'uso della sintassi RGB si affianca, per la definizione dei colori, ai metodi basati sul codice esadecimale e sulle parole chiave. Rimandiamo alla lezione sul colore della guida CSS di base per l'approfondimento.

RGBa

Partendo da questa base, i CSS3 introducono una novità di sicuro interesse. Si tratta della definizione del colore attraverso una notazione RGBa: Rosso (Red), Verde (Green), Blue (Blue) e Alfa. 'Alfa' fa riferimento ad un'informazione extra, quella relativa al cosiddetto 'canale alfa', tramite il quale possiamo impostare la trasparenza del colore definito in RGB.

Sintatticamente, i valori RGB si esprimono allo stesso modo visto in precedenza; il valore a (alfa) si imposta usando una scala compresa tra 0.0 (completamente trasparente) e 1.0 (completamente opaco), in maniera simile a quanto visto per la proprietà opacity:

body {background-color: rgba(255, 255, 255, 0.5)}

Esempi

Iniziamo con una versione rivista e corretta dell'esempio visto nella lezione precedente. Nella demo abbiamo un box con sfondo bianco così definito nel CSS:

#box1 {
;
;
padding:20px;
color:#000;
background-color: rgb(255,255,255);
}

Ora usiamo la notazione RGBa per rendere lo sfondo semi-trasparente:

#box1 {
;
;
padding:20px;
color:#000;
background-color: rgba(255, 255, 255, 0.5);
}

Ecco il risultato.

Usando 0.0 come valore alfa si ottiene un colore completamente trasparente (esempio); usando 1.0 il colore è completamente opaco, il che equivale a non usare il canale alfa, che ha come default il valore 1.0 (esempio).

Qualcuno potrebbe a questo punto chiedersi: ma usando RGBa non si ottengono gli stessi risultati di opacity? La risposta è no.

Per capire è sufficiente inserire del testo all'interno del box, come abbiamo fatto in questo esempio. Si noti la differenza rispetto all'analogo esempio basato sull'uso di opacity.

Figura 1 - Box con trasparenza RGBa
screenshot
Figura 2 - Box semi-trasparente con opacity
screenshot

Nel caso di opacity, la trasparenza viene applicata non solo al colore di sfondo del div, ma anche a tutti gli elementi suoi discendenti, compreso il testo, che infatti risulta anch'esso semi-trasparente. Usando la notazione RGBa per definire il colore di sfondo del div, applichiamo la trasparenza solo su di esso, solo sul colore: gli elementi interni non sono toccati.

Il consiglio, dunque, è quello di valutare bene lo scenario e i risultati desiderati prima di decidere se ottenere la trasparenza facendo ricorso a opacity o alla notazione RGBa.

Tabella del supporto sui browser

Colore Internet Explorer Firefox Safari Google Chrome Opera
RGBa 9.0+ 3.0+ 3.1+ 1.0+ 10.0+


Ti consigliamo anche