Rendre un bouton semi-transparent une fois désactivé, faire disparaître un élément en douceur, superposer un voile sombre sur une image de fond : opacity est la propriété la plus rapide pour ajouter de la transparence sur une page, à condition de comprendre ce qu'elle touche vraiment.
Beaucoup de débutants la confondent avec une simple couleur transparente, alors que son effet va bien plus loin : elle ne se contente pas de teinter, elle efface progressivement tout ce qui se trouve à l'intérieur de l'élément.
Définition
opacity fixe la transparence de tout un élément, à l'aide d'un nombre compris entre 0 (totalement invisible) et 1 (totalement opaque), ou d'un pourcentage équivalent. Contrairement à une couleur de fond rendue transparente, opacity s'applique à l'ensemble de la boîte : son arrière-plan, sa bordure, son texte, et tous ses enfants, qui héritent tous du même niveau de transparence sans distinction.
opacity face à une couleur transparente (rgba, hsla)
opacity | rgba() et hsla() | |
|---|---|---|
| Ce qui devient transparent | Tout l'élément et son contenu | Seulement la couleur ciblée |
| Peut cibler juste le fond, sans toucher le texte | Non | Oui |
Cette différence explique pourquoi une carte avec un fond en rgba(0, 0, 0, 0.5) garde un texte parfaitement net et lisible, alors que la même carte avec opacity: 0.5 voit son texte devenir gris et flou, exactement comme le reste de son contenu.
Exemple concret : pourquoi le texte devient illisible
.carte-desactivee {
opacity: 0.4;
}Sur une carte contenant un titre, une image et un bouton, cette seule ligne rend l'ensemble transparent d'un coup, texte et image compris. C'est parfait pour signaler visuellement un état désactivé, mais catastrophique si le but était seulement d'assombrir le fond : dans ce dernier cas, une couleur en rgba() appliquée au seul fond est le bon outil.
Le piège : opacity crée un contexte d'empilement
Toute valeur d'opacity inférieure à 1 crée un nouveau contexte d'empilement pour l'élément concerné, même sans aucun z-index ni position déclaré. Un enfant de cet élément ne pourra alors jamais passer devant un contenu extérieur, quelle que soit la valeur de son propre z-index, parce que la comparaison reste enfermée à l'intérieur de ce nouveau groupe.
Cas d'usage courants
En dehors du fondu d'apparition, opacity sert à plusieurs situations très concrètes sur une interface. Un bouton désactivé passe souvent à opacity: 0.5 pour signaler visuellement qu'il ne réagit plus, en plus d'un véritable attribut disabled côté HTML. Une image de produit s'assombrit légèrement à opacity: 0.85 au survol, pour donner un retour visuel sans changer sa taille ni sa position. Un en-tête figé au défilement peut aussi utiliser une opacité réduite pour laisser transparaître le contenu qui défile juste en dessous, un effet de superposition léger et peu coûteux en performance.
Questions fréquentes
opacity: 0 a-t-il le même effet que display: none ?
Visuellement seulement. L'élément devient invisible dans les deux cas, mais avec opacity: 0, il conserve sa place dans la mise en page, reste accessible au clavier, et continue de réagir aux clics et au survol, contrairement à display: none qui le retire complètement de la page.
Peut-on animer opacity ?
Oui, et c'est l'une des rares propriétés dont l'animation reste fluide sur presque tous les appareils, y compris les plus modestes, parce qu'elle ne force pas le navigateur à recalculer la mise en page à chaque image. C'est pour cette raison qu'elle est privilégiée pour les fondus, bien plus que l'animation directe d'une couleur transparente.
Pourquoi le fond de mon élément semble-t-il changer de couleur avec opacity ?
Parce qu'opacity laisse transparaître ce qu'il y a derrière l'élément, arrière-plan de la page compris. Une carte blanche à opacity: 0.8 posée sur un fond coloré prend une teinte légèrement différente de sa couleur d'origine, un effet qui n'apparaît jamais avec une couleur de fond rendue transparente par rgba() sur un fond uni identique. C'est un excellent réflexe de test : si une couleur semble se teinter bizarrement au fil du défilement, la cause est presque toujours une opacity mal placée.