1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
|
---
title: opacity
slug: Web/CSS/opacity
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/opacity
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>opacity</code></strong> 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.</p>
<div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<p>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 <code>opacity</code>, on pourra utiliser la propriété {{cssxref("background")}} avec une composante alpha différente de 1 (par exemple : <code>background: rgba(0, 0, 0, 0.4);</code>).</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* 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;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code><number></code></dt>
<dd>Une valeur de type {{cssxref("<number>")}} dans l'intervalle [<code>0.0</code>, <code>1.0]</code> 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 <code>6</code> sera équivalent à <code>1</code> et -2 sera équivalent à <code>0</code>).
<table class="standard-table">
<tbody>
<tr>
<th>Valeur</th>
<th>Signification</th>
</tr>
<tr>
<td><code>0</code></td>
<td>L'élément est complètement transparent (invisible).</td>
</tr>
<tr>
<td>Toute valeur de type {{cssxref("<number>")}} strictement comprise entre <code>0</code> et <code>1</code></td>
<td>L'élément est partiellement transparent, on peut voir l'arrière-plan.</td>
</tr>
<tr>
<td><code>1</code> (la valeur par défaut)</td>
<td>L'élément est complètement opaque.</td>
</tr>
</tbody>
</table>
</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemple_simple">Exemple simple</h3>
<h4 id="CSS">CSS</h4>
<pre class="brush: 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;
}
</pre>
<h4 id="HTML">HTML</h4>
<pre class="brush: 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>
</pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample('Exemple_simple', '640', '64')}}</p>
<h3 id="Jouer_sur_l’opacité_avec_hover">Jouer sur l’opacité avec <code>:hover</code></h3>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: 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;
}</pre>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><img src="//developer.mozilla.org/media/img/mdn-logo.png"
alt="MDN logo" width="128" height="146"
class="opacity">
</pre>
<h4 id="Résultat_2">Résultat</h4>
<p>{{EmbedLiveSample("Jouer_sur_l’opacité_avec_hover", '150', '175')}}</p>
<h2 id="Accessibilité">Accessibilité</h2>
<p>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.</p>
<p>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 <a href="https://www.w3.org/WAI/intro/wcag">WCAG</a> 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).</p>
<ul>
<li><a href="https://webaim.org/resources/contrastchecker/">Vérificateur de contraste WebAIM</a></li>
<li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"><em>Understanding Success Criterion 1.4.3, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
</ul>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td><code>opacity</code> peut désormais être animée.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td>
<td>{{Spec2('CSS3 Colors')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.opacity")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="https://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx">La documentation MSDN de Microsoft sur <code>filter:alpha(opacity=xx)</code></a></li>
</ul>
|
