La propriété CSS opacity et les effets de transparence

La propriété globale de transparence est définie dans CSS 3, cependant elle est implémentée dans les navigateur depuis longtemps.

CSS 3 définit aussi aussi un paramètre de transparence dans le code RVBA (Rouge, Vert, Bleu, Alpha) des couleurs, mais l'opacité elle, peut s'appliquer au contenu d'une balise.

Exemple avec et sans transparence...

Sans transparence
Avec transparence

Dans le second cas, on a superposé deux images comme expliqué dans la démo Image mystérieuse.

Syntaxe

Code standard:

opacity: 0.5

La valeur va de 0 pour un contenu totalement transparent et donc invisible et 1 pour un contenu parfaitement opaque, avec des décimales pour les valeurs intermédiaires.

Pour Internet Explorer 8

filter:alpha(opacity=50)  

Ici la valeur va de 0 à 100, de la transparence totale à l'opacité totale.

Code de la démonstration

Code HTML:

<div class="box" style="width:230px;height:200px">
<img class="imgback" src="images/imgback.jpg" width="230px" height="200px">
<img class="imgtop" src="images/imgtop.jpg" width="230px" height="200px">
</div>

Code CSS:

.box
{
position:relative;
}
.imgtop, .imgback
{
position:absolute;
top:0;
left:0;
}
.imgtop
{
z-index:10;
opacity:0.5;
filter:alpha(opacity=50);
}

Pour superposer les images, on leur attribue une position absolue dans un conteneur qui doit lui-même avoir une position relative.
La propriété z-index:10 place l'image concernée au-dessus de l'autre image.

Voir aussi

Références

© 2011-2012 Xul.fr