En-tete Astuces divers html et css
Classic Moderne

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 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.

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.

Reprenons notre exemple vu dans La propriété CSS z-index:


A
B
C
D


==> 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:X (le plus grosse valeur) place l'image concernée au-dessus de l'autre image.
On met A au-dessus de B et C au-dessus de D.
Puis on ajoute dans notre css à l’endroit désiré la valeur "opacity: 0.5;" pour donner une transparence a notre image (la A en bleu pour notre exemple, et si on met la valeur « background-color: transparent; » a l’image C en vert on remarque de suite le résultat en cliquant sur le lien ci-dessous :

Cliquez pour Voir le résultat:

A est bien au-dessus de B opaque à 50%, et C au-dessus de D, seulement C est transparent mais existe bien défini avec une bordure blanche.











Haut-de-Page