SCRIPT CSS

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.


Testo di prova

Testo di prova

  • <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+









Scopri la sezione dedicata agli script.

Scopri la sezione dedicata agli script.