La definizione del colore tramite i valori RGB nelle varie versioni di CSS è sempre stata valida ed ora, partendo dal questo presupposto, con i CSS3 possiamo anche definire un ulteriore valore: il canale Alfa
A livello sintattico i canali RGB si esprimono come sempre con valori che variano da 0 (nero) a 255(bianco)nella successione Rosso,Verde,Blu. Il canale Alfa viene espresso con valori che variano da 0.0 (completamente trasparente) a 1.0 (completamente opaco).
p{background-color: rgba(255, 255, 255, 0.5)}@p {background-color: rgba(255, 255, 255, 0.5)}@ in questo esempio questo paragrafo ha uno sfondo bianco con Alpa al 50% del valore.
Da notare che a differenza della proprietà opacity la trasparenza viene assegnata solo allo sfondo e non anche al contenuto.
E’ noto però che i CSS3 e la proprietà RGBa sono accettati solo dai più recenti browser. Come fare allora per rendere visibile lo sfondo anche su browser più datati?
La soluzione più semplice è la doppia dicitura:
p {
background-color: rgb(255, 255, 255);/* The Fallback */
background-color: rgba(255, 255, 255, 0.5);
}
In questo modo si vedrà lo sfondo colorato anche sui browser più vecchi e la proprietà RGBa verrà invece utilizzata sui browser che la accettano.
Questo genere di soluzioni vengono chiamate fallback
Una alternativa molto simile è quella di utilizzare un immagine png che vada a sostituire lo sfondo:
p {
background: url(semitrasparente.png);
background: rgba(255, 255, 255, 0.5);
}
Cosi come succede nella situazione precedente, se la proprietà RGBa non viene accettata viene visualizzata un’immagine in png trasparente.
Poichè Internet Explorer rimane sempre uno dei Browser più utilizzati e molti ancora usano una delle versione dalla 6 alla 8 applicare questo fallback è una cosa importante.
In alternativa possiamo giocare con le proprietà di IE:
<!--[if lt IE 9]>
<style type="text/css">
.color-block {
background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
</style>
<![endif]-->
usando questo codice, legato ad una classe css (ma anche direttamente sull’elemento) creiamo una transizione di colori ai quali possiamo applicare una variabile Alfa questa volta basata su caratteri esadecimali: #AARRGGBB