diff options
author | julieng <julien.gattelier@gmail.com> | 2021-09-17 20:58:15 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-12 07:57:33 +0200 |
commit | 149319bb8c7b1394a443f0877c3460cd362aa815 (patch) | |
tree | d534abb0cbc87d5e224836e9d6b888aa58564aa0 /files/fr/web/css/opacity/index.html | |
parent | eb9de0363cb273b54d3f5402bbf4e3bc03c60971 (diff) | |
download | translated-content-149319bb8c7b1394a443f0877c3460cd362aa815.tar.gz translated-content-149319bb8c7b1394a443f0877c3460cd362aa815.tar.bz2 translated-content-149319bb8c7b1394a443f0877c3460cd362aa815.zip |
move *.html to *.md
Diffstat (limited to 'files/fr/web/css/opacity/index.html')
-rw-r--r-- | files/fr/web/css/opacity/index.html | 180 |
1 files changed, 0 insertions, 180 deletions
diff --git a/files/fr/web/css/opacity/index.html b/files/fr/web/css/opacity/index.html deleted file mode 100644 index 4f33f117e4..0000000000 --- a/files/fr/web/css/opacity/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -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>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> - -{{csssyntax}} - -<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> - -<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> |