opacity
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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.
Exemple interactif
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;
/* Légèrement transparent */
opacity: 0.6;
/* Complètement transparent */
opacity: 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 (ainsi6
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 entre0
et1
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.
Définition formelle
Valeur initiale | 1 |
---|---|
Applicabilité | tous les éléments |
Héritée | non |
Pourcentages | map to the range [0,1] |
Valeur calculée | La même que la valeur spécifiée après avoir écrêté number dans l'intervalle [0.0, 1.0]. |
Type d'animation | by computed value type |
Syntaxe formelle
opacity =
<opacity-value>
<opacity-value> =
<number> |
<percentage>
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
Specification |
---|
CSS Color Module Level 4 # transparency |
Compatibilité des navigateurs
BCD tables only load in the browser