mozilla

opacity

Résumé

La propriété CSS opacity définie la transparence d'un élément, c'est à dire, le degré d'arrière-plan qui est visible.

Utiliser cette propriété avec une valeur différente de 1 place l'élément dans un nouveau contexte d'empilement.

  • Valeur initiale 1.0
  • S'applique à tous les éléments
  • Héritée non
  • Pourcentages
  • Média visual
  • Valeur calculée la valeur spécifiée, écrêtée à l'intervalle [0,1]
  • Animable oui, comme un nombre
  • Ordre canonique l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

opacity:  <alphavalue>

Valeurs

<alphavalue>
Est un <number> compris entre 0.0 et 1.0, les deux extrémités incluses, représentant l'opacité du canal, qui est la valeur de son canal alpha. N'importe quelle valeur à l'extérieur de l'intervalle, bien que valide, est rapporté à l'extrémité la plus proche dans l'intervalle.
Valeur Signification
0 L'élément est complètement transparent (c'est-à-dire, invisible).
N'importe quel <number> strictement entre 0 et 1 L'élément est translucide (c'est-à-dire que l'arrière-plan est visible).
1 L'élément est complètement opaque.

Exemples

hbox.example {
  opacity: 0.5; /* on voit l'arrière-plan au travers de hbox */
}

Exemple de compatibilité entre navigateurs

pre {                               /* rend la boîte translucide (opaque à 20%) */
   border: solid red;
   opacity: 0.2;
   filter: alpha(opacity=20);       /* IE8 et précédents */
   zoom: 1;       /* définir "zoom", "width" ou "height" pour déclencher "hasLayout" dans IE 7 et précédents */ 
}
pre {                               /* rend la boîte translucide (opaque à 50%) */
   border: solid red;
   opacity: 0.5;
   filter: alpha(opacity=50);       /* IE8 et précédents */
   zoom: 1;       /* définir "zoom", "width" ou "height" pour déclencher "hasLayout" dans IE 7 et précédents */ 
}
pre {                               /* rend la boîte translucide (opaque à 80%) */
   border: solid red;
   opacity: 0.8;
   filter: alpha(opacity=80);       /* IE8 et précédents */
   zoom: 1;       /* définir "zoom", "width" ou "height" pour déclencher "hasLayout" dans IE 7 et précédents */ 
}

Opacités différentes grâce à :hover

<html>
<head>
<style>
img.opacity {
   opacity: 1;
   filter: alpha(opacity=50);
   zoom: 1;
 }  
 
img.opacity:hover {
   opacity: 0.5;
   filter: alpha(opacity=100);
   zoom: 1;
 }
</style>
</head>

<body>
<img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity" />
</body>
</html>

Spécifications

Spécification Statut Commentaire
CSS Transitions Working Draft Définit opacity comme animable.
CSS Color Module Level 3 Recommendation Définition initiale.

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 1.0 1.0 (1.7 ou moins) 9.0 9.0 1.2 (125)
8.0
filter: alpha(opacity=xx)
filter: "alpha(opacity=xx)"

(les deux sont synonymes)
4.0
filter: alpha(opacity=xx)
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de Base 1.0 1.0 (1.7) 9.0 9.0 3.2
8.0
filter: alpha(opacity=xx)
filter: "alpha(opacity=xx)"

(les deux sont synonymes)
4.0
filter: alpha(opacity=xx)
  • Histoire :  avant Mozilla 1.7 (Firefox 0.9) la propriété -moz-opacity a été implémentée d'une méthode non-standard (héritée). Avec Firefox 0.9 le comportement à changé et la propriété à été renommée en opacity.  Depuis lors -moz-opacity est supporté comme un alias pour opacity.
  • Gecko 1.9.1 (Firefox 3.5) et les versions postérieures ne supportent pas -moz-opacity. Désormais, il ne faut utiliser que opacity.
  • Avant la version 9, Internet Explorer ne supportait pas opacity, mais supporte filter à la place.
  • IE supporte aussi la forme utilisant une extention progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).
  • IE8 a introduit -ms-filter, qui est le synonyme de filter. N'utilisez pas la forme préfixée.
  • De manière similaire à -moz-opacity, -khtml-opacity n'est plus utilisé depuis début 2004 (sortie de Safari 1.2).
    Konqueror n'a jamais supporté -khtml-opacity et supporte opacity depuis sa version 4.0.
    N'utilisez plus -khtml-opacity ni-moz-opacity.

Voir également

MSDN Microsoft's filter:alpha(opacity=xx)

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : teoli, Fredchat, FredB, Mgjbot, Kyodev
Dernière mise à jour par : teoli,
Masquer la barre latérale