CSS3 opacity: trasparenza d’un elemento in css3

Ultimo aggiornamento: Maggio 2009

La proprietà CSS3 opacity (opacità ) permette di cambiare la trasparenza d’un elemento.

La proprietà opacity richiede un valore tra 0.0 (uguale a 100% trasparente) e 1.0 (niente trasparenza).
E scritto come di seguito per esempio d’opacità di 60%:

opacity: 0.6;

opacity non e supportato da Internet Explorer per quale possiamo usare la proprietà ‘alpha filter’ implementata dalla Microsoft.
Questa proprietà di ‘filtro alfa’ richiede un valore tra 0 (completamente trasparente) e 100 (non trasparente).
E scritto come di seguito per esempio d’opacità di 60%:

filter: alpha(opacity=60); /*per Internet Explorer 6-7*/
filter: “alpha(opacity=60)”; /*per Internet Explorer 8*/

NB: Internet Explorer 8 richiede un Doctype in modo Strict per funzionare

Aggiungo qualche esempi su come usare la proprietà opacity per immagine, effetto sullo stato hover e su un testo. Attenzione che con il testo, di nuovo Internet Explorer richiede altri parametri per rendere valido l’effetto. Vedete l’esempio finale.

1. Esempio d’opacità al 50% per immagine:

Il CSS:

img{
opacity:.50;
filter:alpha(opacity=50);
filter:”alpha(opacity=50)”;
}

2. Esempio d’opacità al 100% per immagine, il quale è proprio inutile altro che per capire il valore massimale di opacità:

Il CSS:

img{
opacity:1;
filter:alpha(opacity=100);
filter:”alpha(opacity=100)”;
}

3. Effetto da 100 a 40 sul stato hover:

Il CSS:

a:hover img{
opacity:.40;
filter:alpha(opacity=40);
filter:”alpha(opacity=40)”;
}

4. Effetto da 40 a 100 sul stato hover:

Il CSS:

a img{
opacity:.40;
filter:alpha(opacity=40);
filter:”alpha(opacity=40)”;
}
a:hover img{
opacity:1;
filter:alpha(opacity=100);
filter:”alpha(opacity=100)”;
}

5. Esempio di differenza tra un testo normale ed un testo ad opacità di 60%:

Il CSS:

Imposto una misura di carattere di 2em (200%) per vedere meglio l’effetto:

p.opacity{
font-size:2em;

Le due righe seguente sono necessarie per Internet Explorer…

Imposto una larghezza di 100%. Internet Explorer non applica l’effetto ad un testo se non è definito una larghezza o un altezza o è posizionato
usando float per esempio.

width:100%;

Imposto una sfondo bianco, di nuovo per Internet Explorer. Senza un colore di sfondo, gli contorni del testo a quale è applicato
l’effeto di opacità vengono leggermente distorti. L’aggiunta del colore di sfondo sembra correggere quel problemino con IE.

background-color: #FFFFFF;

L’effeto d’opacità come visto prima:

opacity:.60;
filter:alpha(opacity=60);
filter:”alpha(opacity=60)”;
}

Il risultato:

Proprietà css opacity 100

Proprietà css opacity 60

Nota: per browser più vecchi si usava l’equivalente css3 ‘ -moz-opacity’. Il suo uso non è più necessario

This article in english >>