CSS : coder les couleurs en RGBA ou en HSLA

Le codage RGBA

Ci-dessous deux boîtes avec un fond jaune à demi transparent (ou à demi opaque).
Dans la boîte de gauche le texte est aussi en noir à demi transparent ce qui n'est pas le cas du texte dans la boîte de droite ( texte dans un noir bien opaque).

boîte avec un fond jaune transparent

boîte avec un fond jaune transparent

Le code correspondant

CSS : div{display : inline-block ; width : 40% ; height : 200px ; margin : 1% ; } #fond1{background-color : rgb(255,255,0) ; opacity : 0.5 ;} #fond2 {background-color : rgba(255,255,0,0.5)} h4{ color: black ; text-align : center; } HTML : ... <div id = 'fond1' ><h4>boîte avec un fond jaune transparent</h4> </div> <div id = 'fond2' ><h4>boîte avec un fond jaune transparent</h4></div>

RBGA est un nouveau système de notation de la couleur.
Le A dans RGBA désigne la couche alpha c'est à dire le niveau de transparence (ou d'opacité).

Dans la boîte de gauche (identifiée fond1) la boîte est remplie de jaune (code : rgb(255,255,0)) mais en plus emploi de la propriété opacity à 0.5.
L'inconvénient de la propriété opacity est qu'elle se transmet aux éléments enfants. On dit qu'il y a héritage. Donc le texte balisé par H4 (descendant de DIV) hérite de la demi opacité

Par contre dans la boîte de droite (identifiée fond2) la boîte est remplie aussi de jaune à demi transparent mais le texte est d'un noir opaque car la couleur de remplissage du conteneur a été codé en RGBA donc sans utiliser la propriété opacity. Il n'y a pas héritage.

La notation HSLA

Ci-dessous deux boîtes avec un fond jaune à demi transparent (ou à demi opaque).
Dans la boîte de gauche le texte est aussi en noir à demi transparent ce qui n'est pas le cas dans la boîte de droite ( texte en noir bien opaque).

boîte avec un fond jaune transparent

boîte avec un fond jaune transparent

Le code correspondant :

CSS : #fond3{background-color : hsl(60,100%,50%) ; opacity : 0.5 ;} #fond4 {background-color : hsla(60,100%,50%,0.5)} HTML : <div id = 'fond3' ><h4>boîte avec un fond jaune transparent</h4> </div> <div id = 'fond4' ><h4>boîte avec un fond jaune transparent</h4></div>

Il y a aussi les règles de style relatives aux sélecteurs DIV et H4.

Le A dans HSLA désigne la couche alpha donc le niveau d'opacité.

Dans la boîte de gauche (identifiée fond3) la boîte est remplie de jaune (code hsl(60,100%,50%)) mais en plus avec la propriété opacity à 0.5.

Dans la boîte de droite (identifiée fond4) la couleur de fond est codée en HSLA (code : hsla(60,100%,50%,0.5)).

Conclusion

Donc si vous ne voulez pas que les "descendants" héritent de la transparence définie au niveau du "parent" utilisez la notation RGBA (ou HSLA) pour ce parent plutôt que la notation RGB (ou HSL) couplée avec la propriété opacity.
Retour menu