opacity
=======

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
-------


```css
/\* 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 (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. |

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 =   
  <alpha-value>    
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

Exemples
--------

### Exemple simple

#### CSS


```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


```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


```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


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

* Vérificateur de contraste WebAIM
* Comprendre les règles WCAG 1.4
* *Understanding Success Criterion 1.4.3, W3C Understanding WCAG 2.0* (en anglais)
Spécifications
--------------

| Specification |
| --- |
| CSS Color Module Level 4 # transparency |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* La documentation MSDN de Microsoft sur `filter:alpha(opacity=xx)`