ZANETTE
MARCO
CSS
css3 rgba - trasparenze nel colore
In questo breve articolo voglio "presentarvi" la nuova proprietà rgba dei css3 che permette in assegnare dei
colori con una data trasparenza.
Facciamo prima però una piccola premessa: qual'è la differenza con opacity? Opacity si trasmette anche agli elemnti
figli mentre rgba vale solo all'elemento assegnato. Per chiarire definitivamente la differenza
riporto qui sotto un esempio con il codice utilizzato.
- <div style="height:50px; width:200px; background-color:#F00; opacity:0.5;">Testo di prova</div>
- <div style="height:50px; width:200px; background-color:rgba(255,0,0,0.5);">Testo di prova</div>
Come vedete mentre nel div con opacity la trasparenza viene applicata anche al testo all'interno, nel div con rgba la
trasparenza è solo applicata al colore di background.
Come utlizzare rgba
Come già avrete intuito dal primo esembio la proprietà rgba necessita di 4 parametri:
1 - rosso con valori da 0 a 255;
2 - verde con valori da 0 a 255;
3 - blu con valori da 0 a 255;
4 - alpha cioè la trasparenza con valori da 0 a 1
Supporto browser
- IE 9+
- Firefox 3+
- Chrome
- Safari
- Opera 10+