Docs CSS exécutables : Opacité CSS

Q: Que fait opacity en CSS ?

Elle définit le degré de transparence d'un élément, de 0 (entièrement transparent) à 1 (entièrement opaque). Elle s'applique à tout l'élément, texte, bordure, images et chaque enfant compris, sous forme d'une seule couche aplatie.

Q: Comment rendre seulement le fond transparent, pas le texte ?

Ne touchez pas à opacity et donnez au fond une couleur avec alpha : background-color: rgb(37 99 235 / 0.5); ou rgba(37, 99, 235, 0.5). Le texte et les enfants restent entièrement opaques.

Q: Quelle est la différence entre opacity: 0, visibility: hidden et display: none ?

opacity: 0 masque l'élément, mais il occupe toujours de la place, peut être cliqué et est lu par les lecteurs d'écran. visibility: hidden garde la place mais n'est ni cliquable ni lu. display: none le retire complètement de la mise en page.

Q: L'opacité peut-elle être un pourcentage ?

Oui. opacity: 50% équivaut à opacity: 0.5 dans tous les navigateurs actuels. Les valeurs inférieures à 0 ou supérieures à 1 sont ramenées dans cette plage.

Ce que fait opacity

opacity définit le degré de transparence d'un élément : 1 est opaque (par défaut), 0 invisible, et toute valeur intermédiaire laisse voir le fond à travers. Les boîtes ci-dessous sont posées sur un fond rayé pour que vous le voyiez :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Opacity</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .bg {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: repeating-linear-gradient(45deg, #e5e7eb 0 10px, #ffffff 10px 20px);
    }
    .box { width: 90px; height: 70px; background: #2563eb; color: white; display: grid; place-items: center; font-weight: 700; }
  </style>
</head>
<body>
  <div class="bg">
    <div class="box" style="opacity: 1">1</div>
    <div class="box" style="opacity: 0.75">0.75</div>
    <div class="box" style="opacity: 0.5">0.5</div>
    <div class="box" style="opacity: 0.25">0.25</div>
    <div class="box" style="opacity: 0">0</div>
  </div>
</body>
</html>

La dernière boîte est toujours là : elle occupe son emplacement de 90px dans la rangée, elle ne dessine simplement rien. Remarquez que les chiffres blancs s'estompent avec leurs boîtes. opacity s'applique à l'élément et à tout ce qu'il contient.

Fond transparent, texte opaque

Comme l'opacité estompe aussi les enfants, ce n'est pas le bon outil pour « un fond transparent derrière un texte lisible ». Utilisez plutôt une couleur de fond avec un canal alpha :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background alpha</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .bg { padding: 16px; background: repeating-linear-gradient(45deg, #f59e0b 0 10px, #ffffff 10px 20px); }
    .card { padding: 14px; margin-bottom: 10px; color: #111827; font-weight: 700; }
    .with-opacity { background: #ffffff; opacity: 0.6; }
    .with-alpha { background: rgb(255 255 255 / 0.6); }
  </style>
</head>
<body>
  <div class="bg">
    <div class="card with-opacity" id="a">opacity: 0.6 (text fades too)</div>
    <div class="card with-alpha" id="b">background alpha 0.6 (text stays solid)</div>
  </div>
  <p id="out"></p>
  <script>
    const s = (id) => getComputedStyle(document.getElementById(id));
    document.getElementById('out').textContent =
      'first: opacity ' + s('a').opacity + '  |  second: opacity ' + s('b').opacity + ', background ' + s('b').backgroundColor;
  </script>
</body>
</html>

Les deux panneaux blancs laissent voir les rayures dans la même mesure. Dans le premier, le texte s'estompe avec le panneau. Dans le second, seule la couleur de fond est transparente (rgb(255 255 255 / 0.6), identique à rgba(255, 255, 255, 0.6)), donc le texte reste opaque et facile à lire. Les couleurs avec alpha sont traitées sur la page des couleurs.

Un enfant ne peut pas échapper à l'opacité de son parent : opacity: 1 sur l'enfant ne fait rien, car le parent est dessiné comme une seule couche estompée qui contient déjà l'enfant.

Les valeurs

Valeur	Résultat
`1` ou `100%`	entièrement opaque (par défaut)
`0.5` ou `50%`	à moitié transparent
`0` ou `0%`	entièrement transparent, toujours dans la mise en page et cliquable
`1.5`, `-1`	ramenées à `1` et `0`

L'opacité se transmet visuellement mais pas en tant que propriété : l'opacity calculée d'un enfant reste 1, alors qu'il est dessiné dans un parent estompé.

opacity: 0, visibility: hidden ou display: none

Les trois font disparaître un élément, mais diffèrent sur tout le reste :

	`opacity: 0`	`visibility: hidden`	`display: none`
Occupe de la place	oui	oui	non
Reçoit les clics et le focus	oui	non	non
Lu par les lecteurs d'écran	oui	non	non
Peut être animé	oui, en douceur	bascule à une extrémité, sans fondu	non

La différence qui piège est la deuxième ligne. Un bouton en opacity: 0 peut toujours être cliqué et atteint avec Tab :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden but clickable</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 10px; }
    .row button { width: 150px; height: 40px; font: inherit; }
  </style>
</head>
<body>
  <div class="row">
    <button id="o" style="opacity: 0">opacity: 0</button>
    <button id="v" style="visibility: hidden">visibility: hidden</button>
    <button id="d" style="display: none">display: none</button>
    <button id="shown">Visible</button>
  </div>
  <p id="out"></p>
  <script>
    const hit = (id) => {
      const r = document.getElementById(id).getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 10, r.top + 10);
      return id + ': ' + (top && top.id === id ? 'clickable' : 'not clickable');
    };
    document.getElementById('out').textContent = [hit('o'), hit('v')].join('  |  ') +
      '  |  the Visible button starts at x = ' + document.getElementById('shown').offsetLeft + 'px';
  </script>
</body>
</html>

L'affichage demande au navigateur quel élément se trouve sous un point à l'intérieur de chaque bouton masqué. Le bouton en opacity: 0 répond « cliquable » ; celui en visibility: hidden non. Le bouton visible commence après deux emplacements vides de 150px, car le bouton en display: none est le seul à avoir rendu sa place. Pour estomper un élément puis le retirer, animez opacity et passez à visibility: hidden à la fin.

Fondu au survol

opacity fait partie des propriétés les moins coûteuses à animer : c'est la façon standard de faire apparaître et disparaître des éléments en fondu. Une légende qui apparaît sur une image :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover fade</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tile { position: relative; width: 240px; height: 150px; background: linear-gradient(135deg, #2563eb, #16a34a); }
    .caption {
      position: absolute;
      inset: auto 0 0 0;
      padding: 10px;
      background: rgb(17 24 39 / 0.8);
      color: white;
      opacity: 0;
      transition: opacity 0.25s ease-out;
    }
    .tile:hover .caption, .tile:focus-within .caption { opacity: 1; }
  </style>
</head>
<body>
  <a class="tile" href="#" style="display: block">
    <span class="caption">Caption appears on hover and focus</span>
  </a>
</body>
</html>

:focus-within affiche aussi la légende aux utilisateurs du clavier. Gardez en tête le tableau ci-dessus : même invisible, la légende est toujours lue par les lecteurs d'écran, ce qui est souhaitable pour une légende.

Accessibilité : un texte estompé perd du contraste

Baisser l'opacité baisse le contraste. Un texte gris sur blanc à opacity: 0.5 peut tomber bien en dessous du rapport de 4,5:1 exigé pour le texte courant. Pour un texte secondaire, choisissez une couleur qui passe le contraste plutôt que d'estomper une couleur foncée. Pour les contrôles désactivés, une opacité réduite est un signal courant, mais associez-la à l'attribut disabled pour que le contrôle soit aussi inaccessible au clavier et annoncé comme désactivé.

Effet de bord : le contexte d'empilement

Toute opacity inférieure à 1 crée un nouveau contexte d'empilement, comme transform. Les enfants avec un z-index élevé ne s'empilent alors qu'à l'intérieur de l'élément estompé et ne peuvent pas passer au-dessus des éléments extérieurs. Si un menu déroulant dans un panneau estompé passe sous un autre élément, c'est la raison (la page z-index explique l'empilement).

Erreurs courantes

Estomper une carte pour rendre son fond transparent. Le texte s'estompe aussi. Utilisez rgb(... / 0.5) sur le fond.
Essayer de rendre un enfant de nouveau opaque. L'opacité d'un parent limite chaque enfant.
Masquer avec opacity: 0 seul. L'élément reçoit toujours les clics et le focus. Ajoutez visibility: hidden, ou utilisez display: none (pointer-events: none bloque les clics mais pas le focus clavier).
Écrire opacity: 50. L'opacité va de 0 à 1 ; 50 est ramené à 1. Écrivez 0.5 ou 50%.
Un texte peu contrasté à cause de l'opacité. Vérifiez le contraste du résultat, pas celui de la couleur d'origine.

Questions fréquentes

Que fait opacity en CSS ?

Elle définit le degré de transparence d'un élément, de 0 (entièrement transparent) à 1 (entièrement opaque). Elle s'applique à tout l'élément, texte, bordure, images et chaque enfant compris, sous forme d'une seule couche aplatie.

Comment rendre seulement le fond transparent, pas le texte ?

Ne touchez pas à opacity et donnez au fond une couleur avec alpha : background-color: rgb(37 99 235 / 0.5); ou rgba(37, 99, 235, 0.5). Le texte et les enfants restent entièrement opaques.

Un élément enfant peut-il être plus opaque que son parent ?

Non. L'opacité d'un parent s'applique à tout le groupe, donc opacity: 1 sur un enfant ne peut pas l'annuler. Un enfant d'un parent à 0.5 est dessiné au plus à moitié opaque. Reportez plutôt la transparence sur la couleur de fond du parent.

Quelle est la différence entre opacity: 0, visibility: hidden et display: none ?

opacity: 0 masque l'élément, mais il occupe toujours de la place, peut être cliqué et est lu par les lecteurs d'écran. visibility: hidden garde la place mais n'est ni cliquable ni lu. display: none le retire complètement de la mise en page.

L'opacité peut-elle être un pourcentage ?

Oui. opacity: 50% équivaut à opacity: 0.5 dans tous les navigateurs actuels. Les valeurs inférieures à 0 ou supérieures à 1 sont ramenées dans cette plage.

Concepts liés