CSS3 Couleur (Color)

CSS3Il existe plusieurs nouvelles méthodes pour définir les valeurs de couleur.

Dans CSS3Définir la couleur

Dans la section précédente, vous avez appris à utiliserLa clé de couleur color et la notation RGBDéfinir la couleur. À part CSS3Des nouveaux symboles de fonction ont été ajoutés pour définir les valeurs de couleur des éléments, à savoir rgba(), hsl() et hsla().

Dans la partie suivante, nous discuterons l'un après l'autre de ces modèles de couleur.

Les valeurs de couleur RGBA

Il est possible d'utiliser le symbole de fonction rgba() dans le modèle RGBA (rouge-Vert-Bleu-alpha) pour définir la couleur. Le modèle de couleur RGBA est une extension du modèle de couleur RGB avec un canal alpha, utilisé pour spécifier l'opacité de la couleur.

Le paramètre alpha accepte une valeur comprise entre 0.0 (complètement transparent) et10（complètement transparent）.

h1　{
　　　　color: rgba(0,0,255,0.5);
}
p {
　　　　background-color: rgba(0%,0%,100%,0.3);
}

Valeur de couleur HSL

La couleur peut également être définie en utilisant le symbole de fonction hsl() dans le modèle HSL (teinte)-Saturation-0）。La teinte est représentée par un angle sur la roue des couleurs ou un cercle (c'est-à-dire un arc-en-ciel représenté en cercle) de l'angle (de 0 à360）。L'angle est donné avec un nombre d'unités inférieur, car l'angle est généralement mesuré en degrés, et l'unité est implicite dans CSS.

La saturation et la luminosité sont exprimées en pourcentage.100% de saturation représente une couleur pleine et 0% est une ombre grise. Cependant,100% de luminosité est blanc, 0% de luminosité est noir,50% de luminosité est normal. Consultez l'exemple suivant :

h1　{
　　　　color: hsl(360,70%,60%);
}
p {
　　　　background-color: hsl(480,50%,80%);
}

Valeur de couleur HSLA

Vous pouvez utiliser le symbole de fonction hsla() dans le modèle HSLA (teinte saturation)-Luminosité-alpha） pour définir la couleur. Le modèle de couleur HSLA est une extension du modèle de couleur HSL avec un canal alpha, qui spécifie l'opacité de la couleur.

Le paramètre alpha accepte une valeur comprise entre 0.0 (complètement transparent) et10（complètement transparent）.

h1　{
　　　　color: hsla(360,80%,50%,0.5);
}
p {
　　　　background-color: hsla(480,60%,30%,0.3);
}