Opacité - Astuces CSS | CSS Almanach 2025

La opacitypropriété en CSS spécifie le degré de transparence d'un élément.

Utilisation basique:

div ( opacity: 0.5; )

L'opacité a une valeur initiale par défaut de 1 (100% opaque). L'opacité n'est pas héritée, mais parce que le parent a une opacité qui s'applique à tout ce qu'il contient. Vous ne pouvez pas rendre un élément enfant moins transparent que le parent, sans quelques astuces. Les valeurs sont un nombre de 0 à 1 représentant l'opacité du canal (le canal «alpha»). Lorsqu'un élément a une valeur de 0, l'élément est complètement invisible; une valeur de 1 est complètement opaque (solide).

Découvrez ce stylo!

Compatibilité IE

Si vous souhaitez que l'opacité fonctionne dans toutes les versions d'IE, l'ordre doit être le suivant:

.opaque ( /* Theoretically for IE 8 & 9 (more valid) */ /*… but not required as filter works too */ /* should come BEFORE filter */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8 /* This works in IE 8 & 9 too */ /*… but also 5, 6, 7 */ filter: alpha(opacity=50); // IE 5-7 /* Modern Browsers */ opacity: 0.5; )

Si vous n'utilisez pas cet ordre, IE8-as-IE7 n'applique pas l'opacité, bien que IE8 et un IE7 pur le fassent.

Remarque sur l'empilement des contextes

Si un élément avec opacityet une valeur inférieure à 1 est positionné, la z-indexpropriété s'applique comme décrit dans CSS2.1, sauf que la autovaleur est traitée comme 0 car un nouveau contexte d'empilement est toujours créé.

L'opacité peut être utilisée comme alternative à la visibilitypropriété: visibility: hidden;c'est exactement comme opacity: 0;.