Chargement...

Opacité CSS

Vous savez peindre unis, photos et dégradés. Parfois vous voulez que tout l’élément paraisse plus doux — une couche assourdie, un bouton désactivé, une carte qui recule. C’est le rôle de opacity : à quel point toute la boîte paraît opaque ou transparente.

Que fait opacity ?

La propriété opacity fixe l’opacité d’un élément. La valeur va de 1 (plein opaque, souvent le défaut) à 0 (totalement invisible). Les décimales comme 0.5 sont au milieu. Important : l’opacité s’applique à l’élément et à tout ce qu’il contient — texte, bordures, fonds et boîtes enfants s’atténuent ensemble.

Opacity vs alpha de couleur

Ces deux idées se mélangent facilement. Gardez-les séparées.

📊 Opacity vs alpha de couleur

Outil Ce qui s’atténue Usage typique
opacity Tout l’élément (et ses enfants) Calques doux, look désactivé, fade plus tard
Alpha rgba() / hsla() Seulement cette couche de couleur Fonds transparents avec texte solide dessus
Mot-clé transparent Une valeur de couleur totalement claire Masquer une couleur de bordure sans retirer la propriété
visibility: hidden Cache visuellement mais garde le layout Autre outil — pas approfondi ici

Plein opaque et à moitié fondu

Commencez par comparer 1 et 0.5 sur le même design de carte.

Opaque vs demi-opacité

css
CSS Code 
.card-solid {
opacity: 1;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}

.card-soft {
opacity: 0.5;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}

Ce que vous devez remarquer

Sur .card-soft, le fond et le texte paraissent lavés. Opacity n’épargne pas les lettres.

Les enfants s’atténuent avec le parent

Si un parent a opacity: 0.4, les titres et boutons imbriqués ne peuvent pas « sortir » en mettant leur propre opacity: 1. Ils sont déjà peints dans une couche atténuée.

L’opacity du parent lave les enfants

css
CSS Code 
.overlay {
opacity: 0.4;
background-color: #0f172a;
color: white;
padding: 1rem;
}

.overlay strong {
opacity: 1; /* ne restaure pas la force pleine dans un parent atténué */
}

Implication design

Panneau givré avec texte net ? Atténuez la couleur de fond avec rgba, pas tout l’élément avec opacity.

Préférez rgba quand seul le remplissage doit s’adoucir

Ici le fond du panneau est translucide, mais le texte reste à pleine force.

Remplissage doux, texte solide

css
CSS Code 
.panel {
background-color: rgba(15, 118, 110, 0.25);
color: #042f2e; /* texte à pleine force */
padding: 1rem;
}

Habitude d’UI assourdie

Schéma courant : baisser un peu l’opacity sur les actions secondaires ou contrôles désactivés pour qu’ils paraissent plus calmes — en gardant un contraste lisible.

Bouton secondaire assourdi

css
CSS Code 
.btn-secondary {
opacity: 0.75;
background-color: #e2e8f0;
color: #0f172a;
border: none;
padding: 0.5rem 1rem;
}

Zéro est invisible — l’espace peut rester

opacity: 0 rend l’élément invisible, mais il peut encore occuper de l’espace de layout et, selon le contexte, recevoir des événements pointeur. Pour le retirer du layout, c’est un autre outil (display: none), pas l’opacity seule.

Invisible mais encore dans le flux

css
CSS Code 
.ghost {
opacity: 0;
}

Essayez vous-même

  1. Deux cartes aux mêmes couleurs ; une opacity: 1, une opacity: 0.5.
  2. Une ligne en gras dans un parent opacity: 0.4 — confirmez que vous ne « défadez » pas totalement l’enfant.
  3. Reconstruisez le look doux avec background-color: rgba(…, 0.25) et color solide.
  4. Bouton secondaire à opacity: 0.75 et vérifiez la lisibilité.
  5. Optionnel : opacity: 0 sur une boîte et remarquez le trou laissé dans le layout.

Erreurs fréquentes

  • Mettre opacity sur le parent alors qu’on voulait seulement un fond transparent
  • S’attendre à ce qu’un enfant en opacity: 1 paraisse plein opaque dans un parent atténué
  • Utiliser opacity: 0 à la place de retirer l’espace de layout
  • Baisser l’opacity jusqu’à ce que le contraste du texte échoue
  • Confondre le mot-clé transparent avec la propriété opacity

En bref

  • opacity fixe à quel point tout l’élément est transparent (0–1)
  • Les enfants s’atténuent avec le parent — on ne s’en échappe pas pleinement de l’intérieur
  • Pour fonds doux avec texte solide, préférez l’alpha rgba / hsla
  • Une faible opacity peut calmer l’UI ; gardez l’accessibilité en tête
  • Invisible (0) n’est pas retiré du layout
  • Pratiquez la paire de cartes et la reconstruction rgba jusqu’à ce que la différence soit évidente

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Css Tutoriel