Opacité et transparence RGBA

La propriété opacity définit la transparence de l’élément entier, y compris de ses éléments enfants et de son contenu. Ses valeurs vont de 0, entièrement transparent, à 1, entièrement opaque.

Une précaution importante : opacity s’applique à l’ensemble de l’arbre de l’élément. Le texte, les images et les éléments enfants contenus dans un élément avec opacity: 0.5 sont tous transparents à 50 % ; vous ne pouvez pas rendre les enfants plus opaques que leur parent.

Pour rendre uniquement la couleur d’arrière-plan transparente sans modifier le texte ni les éléments enfants, utilisez rgba() plutôt que opacity :

Utilisez le modèle mental suivant :

• opacity: 0.5 — l’élément entier et ses enfants deviennent transparents
• rgba(r,g,b,0.5) — seule la valeur de couleur est transparente ; les enfants ne sont pas affectés

Le même principe s’applique à hsla(). Le quatrième argument est le canal alpha (0–1) :

Le CSS moderne permet d’utiliser une barre oblique comme séparateur pour l’alpha dans rgb() et hsl(), sans la variante avec « a » :

Ces trois valeurs masquent les éléments, mais de manière différente :

• opacity: 0 — l’élément est invisible, mais occupe toujours de l’espace et reste cliquable
• visibility: hidden — l’élément est invisible, occupe toujours de l’espace, mais n’est pas cliquable
• display: none — l’élément est entièrement retiré de la mise en page

Comme opacity est composée par le GPU, c’est l’une des propriétés CSS les moins coûteuses à animer. Les effets d’apparition et de disparition progressive devraient toujours utiliser des transitions d’opacité plutôt que de couleur d’arrière-plan.

Pour donner à un élément un arrière-plan translucide tout en gardant le texte parfaitement lisible, utilisez rgba() sur background-color :

Utilisez RGBA dans border-color et box-shadow pour créer des effets subtils et transparents :

Un texte à faible opacité est moins lisible et peut ne pas respecter les exigences de contraste des couleurs de WCAG. Vérifiez toujours les rapports de contraste lorsque vous utilisez la transparence sur du texte. Assurez un rapport minimal de 4.5:1 pour le texte normal.

opacity rend transparents un élément entier et ses enfants. Utilisez rgba() ou hsla() pour créer des couleurs transparentes sans modifier les éléments enfants. Les transitions d’opacité sont accélérées par le GPU et offrent de bonnes performances. Vérifiez toujours les rapports de contraste lorsque vous utilisez la transparence sur du texte.