Tutoriel CSS3 (8) : Guide de transparence CSS3

CSS3 transparent...opaque...dégradé...comme vous voulez l'appeler ! Voici quelques directives pour utiliser la transparence CSS3 avec quelques exemples.

En fait, Firefox le prend en charge depuis longtemps, mais IE ne l'a jamais pris en charge !
Article précédent : Tutoriel CSS3 (7) : Polices CSS3 incorporées
L'instruction "opacity" permet de définir la transparence d'un élément : calque, texte, image, etc... Un élément avec une valeur d'opacité de 1 est complètement opaque. En revanche, une valeur de 0 est complètement transparente et invisible. Toute valeur comprise entre 1 et 0 indique le degré de transparence de l'élément.
Compatibilité des navigateurs
L'opacité est l'élément CSS3 le mieux supporté par les navigateurs...sauf IE, bien sûr ! Transparence CSS3 (Exemple 1 : Calques)

L'exemple transparent ci-dessus utilise le style suivant :

p.opacityL1 { background:#036; opacity:0.2; width:575px; height:20px; } p.opacityL2 { background:#036; opacity:0.4; width:575px; height:20px; } p.opacityL3 { background:#036; opacity:0.6; width:575px; height:20px; } p.opacityL4 { background:#036; opacity:0.8; width:575px; height:20px; } p.opacityL5 { background:#036; opacity:1.0; width:575px; height:20px; }

Prise en charge du navigateur :

Firefox(3.05…)

Google Chrome(1.0.154…)

Google Chrome(2.0.156…)

Internet Explorer( IE7, IE8 RC1 )

Opera(9.6…)

Safari(3.2.1 windows…) CSS 3 Transparent (Exemple 2 : Image)

On peut également utiliser des effets de transparence avec différentes opacités sur l'image, tout comme l'exemple ci-dessus. Une application intéressante consiste à appliquer une opacité à :hover pour obtenir un effet de survol de lien avec la souris.

img.opacity1 { opacity:0.25; width:150px; height:100px; } img.opacity2 { opacity:0.50; width:150px; height:100px; } img.opacity3 { opacity:0.75; width:150px; height:100px; }

Prise en charge du navigateur :

Firefox(3.05…)

Google Chrome(1.0.154…)

Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2.1 windows…)

Ce qui précède est le contenu du tutoriel CSS3 (8) : Guide de transparence CSS3 Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Articles associés :

CSS définissant un élément comme étant translucide

Exemple d'utilisation de RGBa pour ajuster la transparence en CSS3

Code complet pour implémenter l'opacité CSS3