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.

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

• Z-index. La superposition des contenu s'utilise conjointenement avec la transparence.

Références

• Transparence: La propriété "opacity". Spécification CSS 3 du W3C.