opacity

Hérité : oui   -   Compatibilité : tous les navigateurs sauf IE - CSS 3

L'opacité d'un élément est le contraire de sa transparence : quand l'élément est "opaque" (valeur 1.0) il est visible, si vous fixez une valeur de 0, il devient totalement transparent, c'est à dire invisible. Une opacité de 90% (valeur 0.9) équivaut à une transparence de 10%.

Cette propriété est définie dans la norme CSS 3 mais elle est déjà supportée par Firefox (depuis sa version 1.7), Opera (depuis sa version 9) et Safari.

Les versions de Firefox/Mozilla antérieures à la version 1.7 ne supportaient pas cette propriété mais proposaient la propriété équivalente -moz-opacity qu'il peut être souhaitable d'intégrer dans vos définitions afin de rendre votre code compatible avec ces anciennes versions.

Internet Explorer ne supporte pas cette propriété mais permet d'obtenir un résultat équivalent avec la propriété filter en écrivant par exemple "filter:alpha(opacity= 50);" pour une opacité de 50%.

Pour plus de détail sur cette propriété, consultez Texte opaque sur fond translucide, ainsi que les pages en anglais, trés illustrées, de mandarindesign.

Syntaxe CSS
opacity: valeur

Pour obtenir une meilleure compatibilité avec les anciennes versions de Firefox et avec Explorer, écrivez :

opacity: valeur;
filter:alpha(opacity=valeur*100);
-moz-opacity:valeur;

Valeur(s) possible(s) pour cette propriété :
entre 0.0 (transparence complète) et 1.0 (opacité complète)
Valeur initiale

1.0

Exemple
.semi-transparent {
    opacity: 0.5;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
}
S'applique à 

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style .opacity

et pour Internet Explorer :

[window.]document .getElementById("elementID") .filters .alpha .opacity

cursor
filter(new style)
filter(old style) -!important
opacity
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkShadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
white-space




Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web


Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.


Valid HTML 4.01 Transitional
Raccourcis
Contact liens d'évitement et raccourcis clavier Droits de copie Accueil Imprimer
Aller au menu