CSS Couleurs
CSS prend en charge plus de 140 noms de couleurs, valeurs HEX, valeurs RGB , valeurs RGBA, valeurs HSL, valeurs HSLA et opacité.
Couleurs RGBA
Les valeurs de couleur RGBA sont une extension des couleurs RGB avec un canal alpha, qui spécifie l'opacité d'une couleur.
Une valeur de couleur RGBA est spécifiée avec :
rgba( rouge, vert , bleu, alpha )
Le paramètre alpha est un nombre compris entre 0.0 (totalement transparent) et 1.0 (totalement opaque).
L'exemple suivant définit différentes couleurs RGBA :
Exemple
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* rouge avec opacité */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* vert avec opacité */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* bleu avec opacité */ Couleurs HSLA
Les valeurs de couleur HSLA sont une extension des couleurs HSL avec un canal alpha, qui spécifie l'opacité d'une couleur.
Une valeur de couleur HSLA est spécifiée avec :
hsla( teinte, saturation , luminosité, alpha )
Le paramètre alpha est un nombre compris entre 0.0 (totalement transparent) et 1.0 (totalement opaque) :
L'exemple suivant définit différentes couleurs HSLA :
Exemple
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* vert avec opacité */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* vert clair avec opacité */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* vert foncé avec opacité */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* vert pastel avec opacité */ Propriété d'opacité CSS
La propriété opacité définit l'opacité pour l'ensemble de l'élément (la couleur de fond et le texte seront opaques ou transparents).
La valeur de la propriété opacité doit être un nombre compris entre 0.0 (totalement transparent) et 1.0 (totalement opaque).
Remarque : le texte à l'intérieur de l'élément sera également transparent ou opaque !
L'exemple suivant montre différents éléments avec opacité :
Exemple
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* rouge avec opacité */
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* vert avec opacité */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* bleu avec opacité */