CSS3 opacity - trasparenza d'un elemento

Pagina di prova delle proprietà css3 opacity / Testing page of the property css3 opacity

Compatibilità: Non supportata da IE. Stesso effetto può essere raggiunto usando filter:alpha(opacity=100);

Compatibility: Not supported by IE. The same effect can be obtained using filter:alpha(opacity=100);

Ultimo aggiornamento / Last update: 05/09

IT: Articolo completo - EN: Full article

1. Opacità al 40% per immagine / Opavity at 40% for an imange:

Regola CSS / Css rules:

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

2. Opacità da 100% a 60% per immagine usato come link / Opacity from 100% to 60% on an image used as link:

Regola CSS / Css rules:

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

3. Opacità da 60% a 100% per immagine usato come link / Opacity from 60% to 100% on an image used as link:

Regola CSS / Css rules:

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

4. Diferenza tra un testo normale ed un testo ad opacità di 50% / Difference in between a normal text and a text with opacity 50%

Regola CSS / Css rules:

p{
/*IE applica l'effeto ad un testo solo se è definito una larghezza o un altezza o è posizionato usando float per esempio*/
/*IE applies the effect to a text only if it is specified a width or height or positioned using a float for example*/
width:100%;
/*Per IE senza un colore di sfondo, gli contorni del testo a quale è applicato l'effeto di opacità vengono legermente distorti*/
/*For IE without a background color, the edges of the text to which is applied the opacity are slightly ragged*/
background-color: #FFFFFF;
filter:alpha(opacity=50);
opacity:.50;
}

Sono un testo nero normale

Sono un testo nero al 50% di opacità