Trasparenza del background di un div con RGBA
I CSS3 introducono una novità molto interessante: la definizione del colore attraverso una notazione RGBa: Rosso (Red), Verde (Green), Blue (Blue) e Alfa.
"Alfa" fa riferimento ad un’informazione aggiuntiva, 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:
se
<divcss keyword">background-color: rgb(255, 255, 255);width:200px;heoght:200px;" > </div> |
ci disegna un riquadro bianco di 200px di lato
l'istruzione
<divcss keyword">background-color: rgba(255, 255, 255, 0.5);width:200px;heoght:200px;" > </div>v> |
ci disegna un riquadro bianco sempre di 200px di lato ma con il colore di sfondo trasparente al 50%
Contrariamente a quanto succede con l'istruzione "opacity" gli elementi figli di questo div non ereditano la trasparenza.