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);).

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 (la valeur par défaut) 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

Accessibilité

Si l'opacité du texte est modifiée, il est nécessaire de vérifier que le contraste entre la couleur du texte et l'arrière-plan est suffisant pour que le texte soit lisible, y compris pour les personnes souffrant de trouble de la vision.

Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte (dont l'opacité a été adaptée) et celle de l'arrière-plan. Les recommandations du WCAG  conseillent un ratio de 4.5:1 pour les textes normaux et 3:1 pour les textes plus grands (un texte est considéré comme grand s'il est en gras et dont les lettres mesurent 18.66px ou si ses lettres mesurent 24px ou plus).

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.

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

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1
Support complet 1
Aucun support 1 — 3.5
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Support complet 9Opera Support complet 9Safari Support complet 1.2WebView Android Support complet 1Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 9Safari iOS Support complet 3.2Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

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