From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/opacity/index.md | 161 +++++++++++++++----------------------- 1 file changed, 65 insertions(+), 96 deletions(-) (limited to 'files/fr/web/css/opacity') diff --git a/files/fr/web/css/opacity/index.md b/files/fr/web/css/opacity/index.md index 4f33f117e4..1f6f054b5f 100644 --- a/files/fr/web/css/opacity/index.md +++ b/files/fr/web/css/opacity/index.md @@ -7,17 +7,18 @@ tags: - Reference translation_of: Web/CSS/opacity --- -
{{CSSRef}}
+{{CSSRef}} -

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 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. -
{{EmbedInteractiveExample("pages/css/opacity.html")}}
+{{EmbedInteractiveExample("pages/css/opacity.html")}} -

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é {{cssxref("background")}} avec une composante alpha différente de 1 (par exemple : background: rgba(0, 0, 0, 0.4);).

+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é {{cssxref("background")}} avec une composante alpha différente de 1 (par exemple : `background: rgba(0, 0, 0, 0.4);`). -

Syntaxe

+## Syntaxe -
/* Valeurs numériques */
+```css
+/* Valeurs numériques */
 /* Totalement opaque  */
 opacity: 1;
 opacity: 1.0;
@@ -33,47 +34,32 @@ opacity: 0;
 opacity: inherit;
 opacity: initial;
 opacity: unset;
-
- -

Valeurs

- -
-
<number>
-
Une valeur de type {{cssxref("<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). - - - - - - - - - - - - - - - - - - - -
ValeurSignification
0L'élément est complètement transparent (invisible).
Toute valeur de type {{cssxref("<number>")}} strictement comprise entre 0 et 1L'é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

+``` + +### Valeurs + +- `` + + - : Une valeur de type {{cssxref("<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 {{cssxref("<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 {{csssyntax}} -

Exemples

+## Exemples -

Exemple simple

+### Exemple simple -

CSS

+#### CSS -
div {
+```css
+div {
   background-color: yellow;
 }
 
@@ -89,24 +75,26 @@ opacity: unset;
   /* Le texte est clairement visible */
   opacity: 0.9;
 }
-
+``` -

HTML

+#### 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>
-
+```html +
On arrive à peine à lire.
+
On voit mieux.
+
Ceci est plus simple à lire.
+``` -

Résultat

+#### Résultat -

{{EmbedLiveSample('Exemple_simple', '640', '64')}}

+{{EmbedLiveSample('Exemple_simple', '640', '64')}} -

Jouer sur l’opacité avec :hover

+### Jouer sur l’opacité avec `:hover` -

CSS

+#### CSS -
img.opacity {
+```css
+img.opacity {
   opacity: 1;
   /* IE8 et antérieurs */
   filter: alpha(opacity=100);
@@ -118,63 +106,44 @@ img.opacity:hover {
   opacity: 0.5;
   filter: alpha(opacity=50);
   zoom: 1;
-}
+} +``` -

HTML

+#### HTML -
<img src="//developer.mozilla.org/media/img/mdn-logo.png"
+```html
+MDN logo
+     class="opacity">
+```
 
-
Résultat

+#### Résultat
 
-
{{EmbedLiveSample("Jouer_sur_l’opacité_avec_hover", '150', '175')}}

+{{EmbedLiveSample("Jouer_sur_l’opacité_avec_hover", '150', '175')}}
 
-
Accessibilité

+## 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.

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

+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](https://www.w3.org/WAI/intro/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).
 
-
+- [Vérificateur de contraste WebAIM](https://webaim.org/resources/contrastchecker/)
+- [Comprendre les règles WCAG 1.4](/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)
+- [_Understanding Success Criterion 1.4.3, W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
 
-
Spécifications

+## Spécifications
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
SpécificationStatutCommentaires
{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}{{Spec2('CSS3 Transitions')}}opacity peut désormais être animée.
{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}{{Spec2('CSS3 Colors')}}Définition initiale.

+| Spécification                                                                        | Statut                                   | Commentaires                          |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------- |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}} | {{Spec2('CSS3 Transitions')}} | `opacity` peut désormais être animée. |
+| {{SpecName('CSS3 Colors', '#opacity', 'opacity')}}                 | {{Spec2('CSS3 Colors')}}         | Définition initiale.                  |
 
-
{{cssinfo}}

+{{cssinfo}}
 
-
Compatibilité des navigateurs

+## Compatibilité des navigateurs
 
-
{{Compat("css.properties.opacity")}}

+{{Compat("css.properties.opacity")}}
 
-
Voir aussi

+## Voir aussi
 
-
+- [La documentation MSDN de Microsoft sur `filter:alpha(opacity=xx)`](https://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx)
-- 
cgit v1.2.3-54-g00ecf