Creare un div con sfondo colorato e leggermente trasparente è molto utile, per esempio per creare una tendina opaca e rendere più leggibili i testi posizionati sopra ad immagini. Possiamo farlo semplicemente usando i CSS con il seguente codice:

#ilnomedeltuodiv  {
    background: #000000;
    opacity: 0.7;
}

Abbiamo assegnato il colore di sfondo nero (#000000) e una trasparenza o opacità del 70% (0.7).

E’ semplice e funziona ma non è il modo più corretto per farlo. Io trovato un bel tutorial che spiega come fare.
Esprimendo il colore in caratteri esadecimali (il cancelletto # seguito da un numero di 3 o 6 cifre che rappresenta il colore) creeremo una trasparenza che verrà applicata a tutti i contenuti che inseriremo nel nostro div. Se aggiungeremo del testo, anche questo risulterà leggermente trasparente.
Non è gravissimo ma c’è modo di evitarlo, basta esprimere i colori usando la notazione RGB.

In termini molto semplici, definiremo i valori del colore assegnando una cifra che va da 0 a 255 per ogni componente R (red) G (green) B (blue).
Quindi se vogliamo per esempio usare il colore bianco sciveremo: rgb(255, 255, 255)
e per il nero: rgb(0, 0, 0).

Con CSS3 è stata introdotta una novità molto interessante che ci permette di aggiungere un quarto valore che rappresenta il canale alfa, la traparenza, RGBa.

Il colore nero traparente al 70% verrà quindi espresso così: rgba(0, 0, 0, 0.7).

Torniamo quindi al nostro div, il codice corretto da inserire sarà semplicemente:

#ilnomedeltuodiv  {
    rgba(0, 0, 0, 0.7);
}

… sarebbe tutto molto semplice se vivessimo in un mondo felice senza Internet Explorer… il famigerato browser non supporta infatti RGBa e se vogliamo che il css sia interpretato anche da lui dovremo fare la seguente aggiunta, esprimendo il colore in formato ARGB:

#ilnomedeltuodiv  {
    background: rgba(0, 0, 0, 0.7); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000, endColorstr=#B2000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000, endColorstr=#B2000000)";
} 

Il formato ARGB è composto da 8 cifre, le prime due rappresentano la trasparenza, le altre il colore.
In questa pagina trovate un comodo form per convertire valori RGBa in ARGB
http://beijingyoung.com/articles/rgba-argb-converter/

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...