La propriété opacity définit la transparence d'un élément. Autrement dit, elle permet de définir le degré de visibilité de l'arrière-plan sur lequel est placé l'élément.

La valeur s'applique à l'ensemble de l'élément et à ce qu'il contient même si la valeur n'est pas héritée par les éléments fils. Ainsi, un élément et les fils qu'il contient auront tous la même opacité relative à l'arrière-plan, même si l'élément et ses descendants ont des opacités différentes. Si on souhaite utiliser différentes opacités pour les différents éléments enfants, plutôt que d'utiliser opacity, on pourra utiliser la propriété background avec une composante alpha différente de 1 (par exemple : background: rgba(0, 0, 0, 0.4);).

Valeur initiale1.0
Applicabilitétous les éléments
Héritéenon
Médiavisuel
Valeur calculéela valeur spécifiée, écrêtée à l'intervalle [0,1]
Type d'animationun nombre
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Valeurs numériques */
/* Totalement opaque  */
opacity: 1;
opacity: 1.0;

/* Légèrement transparent */
opacity: 0.6;

/* Complètement transparent */
opacity: 0.0;
opacity: 0;

/* Valeurs globales */
opacity: inherit;
opacity: initial;
opacity: unset;

Valeurs

<number>
Une valeur de type <number> dans l'intervalle [0.0, 1.0] qui représente l'opacité de l'élément, la valeur de son canal alpha. Les valeurs en dehors de cet intervalle seront considérées comme valides mais ramenées dans cet intervalle (ainsi 6 sera équivalent à 1 et -2 sera équivalent à 0).
Valeur Signification
0 L'élément est complètement transparent (invisible).
Toute valeur de type <number> strictement comprise entre 0 et 1 L'élément est partiellement transparent, on peut voir l'arrière-plan.
1 L'élément est complètement opaque.

Syntaxe formelle

<number>

Exemples

Exemple simple

CSS

div {
  background-color: yellow;
}

.leger {
  /* On ne voit presque pas le texte */
  opacity: 0.2;
}
.moyen {
  /* On peut mieux discerner le texte */
  opacity: 0.5;
}
.lourd {
  /* Le texte est clairement visible */
  opacity: 0.9;
}

HTML

<div class="leger">On arrive à peine à lire.</div>
<div class="moyen">On voit mieux.</div>
<div class="lourd">Ceci est plus simple à lire.</div>

Résultat

Jouer sur l'opacité avec :hover

CSS

img.opacity {
  opacity: 1;
  /* IE8 et antérieurs */
  filter: alpha(opacity=100);
  /* Déclenche "hasLayout" dans IE 7 et antérieurs */
  zoom: 1; 
}
 
img.opacity:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
}

HTML

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

Résultat

Spécifications

Spécification Statut Commentaires
CSS Transitions
La définition de 'opacity' dans cette spécification.
Version de travail opacity peut désormais être animée.
CSS Color Module Level 3
La définition de 'opacity' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari (WebKit)
Support simple 1.0 1.0 (1.7 ou moins)[1] (Oui) 9.0[2]
8.0
4.0
9.0 1.2 (125)[3]
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
Support simple 1.0 1.0 (1.7)[1] (Oui) 9.0[2]
8.0
4.0
9.0 3.2

[1] Avant Gecko 1.7 (Firefox 0.9), la propriété préfixée -moz-opacity était implémentée de façon non-standard car héritée. Avec Firefox 0.9 le comportement a été corrigé et la propriété renommée opacity. Depuis, -moz-opacity était supportée comme un synonyme pour opacity.

Gecko 1.9.1 (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0) et les versions supérieures ne supportent -moz-opacity et le support de MozOpacity en JavaScript a été retiré de Gecko 13 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10) avec bug 730532. Depuis, on peut simplement utiliser opacity.

[2] Avant la version 9, Internet Explorer ne supportait pas opacity mais un filtre avec la propriété filter property qui pouvait prendre une valeur alpha(opacity=xx) ou "alpha(opacity=xx)". IE4 et IE9 supportait la forme étendue : progid:DXImageTransform.Microsoft.Alpha(Opacity=xx). IE8 a introduit -ms-filter, qui est synonyme de filter. Les deux ont disparu sous IE10.

[3] De la même façon que -moz-opacity, -khtml-opacity n'existe plus depuis début 2004 (sortie de Safari 1.2).
Konqueror n'a jamais supporté -khtml-opacity et supporte opacity depuis la version 4.0.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, FredB, Mgjbot, Kyodev, Fredchat
 Dernière mise à jour par : SphinxKnight,