CSS3: opacità (seconda opzione)

CSS3 offre una seconda opzione per gestire la trasparenza in alternativa a quella presa in considerazione nel post precedente. Si tratta di usare la notazione RGBa, dove oltre alla percentuale del colore RGB possiamo specificare la trasparenza con il canale alfa.
Riprendendo l’esempio precedente:

body{ font-family:Verdana; font-size:75%; background-image:url(images/sky.jpg);}
#box1 {
width:400px;
height:400px;
padding:20px;
color:#000;
}

lo integriamo modificando le istruzioni sul background del box in questo modo

background-color: rgba(255, 255, 255, 0.5);

dove l’ultima voce è appunto il canale alfa dell’opacità. A questo punto la domanda è sulla differenza rispetto al post precedente: nel caso dell’attributo opacity questo viene applicato allo sfondo del box e agli elementi contenuti, mentre nel caso della notazione RGBa sarà solo lo sfondo del box ad essere trasparente e non gli elementi contenuti nel box.

Ecco l’esempio