Comme le nom lui-même l'indique Couleur de l'arrière plan la propriété détermine le Couleur de l'arrière plan de tout élément. Il peut être utilisé pour changer le Couleur de l'arrière plan d'un seul élément, d'éléments multiples, d'une page entière ou d'un document entier.

Dans CSS, diverses valeurs peuvent être affectées au Couleur de l'arrière plan propriété comme indiqué ci-dessous:

• Un nom de couleur je.e. Rouge, jaune, vert, etc.,
• Les valeurs de couleur hexadécimale i.e. # FF0000, 00FF00, etc.
• La valeur RVB comme RVB (255, 0, 0), etc.
• Les valeurs HSL telles que (55, 45, 55), etc.

Cet article présentera un aperçu général de la propriété de couleur arrière. Il discutera de la façon d'attribuer différentes valeurs à la propriété de couleur arrière.

Comment définir la couleur d'arrière-plan à l'aide de noms de couleurs

Dans CSS, nous pouvons définir la couleur d'arrière-plan en utilisant des noms de couleurs tels que le rouge, le vert, le bleu, etc.

Exemple 1: L'exemple donné ci-dessous définira la couleur d'arrière-plan de la page entière en utilisant la «valeur de nom de couleur»:

Bienvenue à Linuxhint.com

Exemple de paragraphe

L'extrait ci-dessus spécifie la couleur d'arrière-plan à l'aide de CSS internes. Il affichera la sortie suivante:

Comment définir la couleur d'arrière-plan en utilisant le code couleur hexadécimal

Dans CSS, la couleur d'arrière-plan peut être affectée à l'aide de valeurs de couleur hexadécimale. La valeur de couleur hexadécimale se compose d'un "#" symbole suivi du code de trois ou six chiffres.

Exemple 2: L'extrait ci-dessous utilise le code couleur hexadécimal pour styliser la couleur d'arrière-plan des balises de paragraphe utilisant le style interne et la couleur d'arrière-plan de

Utilisation de CSS en ligne:

Color d'arrière-plan en utilisant le code couleur hexadécimal

Bienvenue à Linuxhint.com

Bienvenue à Linuxhint.com

En conséquence, il produit la sortie suivante:

Comment définir la couleur d'arrière-plan à l'aide du code couleur RVB

Les codes de couleur RVB peuvent être utilisés pour définir la couleur d'arrière-plan d'un élément. Le code couleur RVB détermine la couleur à l'aide de valeurs numériques varie de 0 à 255. La couleur RVB utilise trois couleurs principales i.e. (rouge, vert et bleu) pour générer différentes combinaisons de couleurs.

Exemple 3: L'exemple suivant créera un fichier CSS externe pour définir la couleur d'arrière-plan de divers éléments. Il utilise les codes de couleur RVB pour appliquer la couleur d'arrière-plan.

Fichier CSS:

corps
Color en arrière-plan: RVB (212, 212, 212);

H1
Color en arrière-plan: RVB (0, 144, 158);

p
Color en arrière-plan: RVB (137, 210, 236);

Fichier HTML:

Color d'arrière-plan en utilisant le code couleur RVB

Bienvenue à Linuxhint.com

Bienvenue à Linuxhint.com

Bienvenue à Linuxhint.com

Le code ci-dessus générera le résultat suivant:

Comment définir la couleur d'arrière-plan à l'aide du code couleur RGBA

Un paramètre supplémentaire alpha (a) peut être ajouté au code couleur RVB qui détermine l'opacité d'une couleur. La valeur du paramètre alpha se situe entre 0.0 à 1.0.

Exemple 4: Le code donné ci-dessous a étendu un peu l'exemple précédent et a également ajouté la valeur du paramètre alpha:

Fichier CSS:

corps
Color en arrière-plan: RGBA (212, 212, 212, 0.1);

H1
Color en arrière-plan: RGBA (0, 144, 158, 0.1);

p
Color en arrière-plan: RGBA (137, 210, 236, 0.1);

Fichier HTML:

Color d'arrière-plan en utilisant le code couleur RVB

Bienvenue à Linuxhint.com

Bienvenue à Linuxhint.com

Bienvenue à Linuxhint.com

Le seul changement dans le précédent (RGB) et cet exemple (RGBA) est le paramètre alpha. Comparez les deux sorties, vous remarquerez une différence claire:

C'est ainsi que le paramètre alpha a fonctionné.

Comment définir la couleur d'arrière-plan à l'aide du code couleur HSL

CSS prend en charge une autre convention de couleurs nommée HSL. HSL définit une couleur par rapport à la teinte, à la saturation et à la légèreté.

Exemple 5: Considérez le code suivant qui spécifie le fonctionnement de la convention HSL:

Color d'arrière-plan en utilisant le code couleur HSL

Bienvenue à Linuxhint.com

Bienvenue à Linuxhint.com

Le code ci-dessus a implémenté la couleur d'arrière-plan sur

et

élément utilisant la convention de couleur HSL. Il affichera la sortie suivante:

Comment définir la couleur d'arrière-plan à l'aide du code couleur HSLA

Le paramètre alpha peut être utilisé avec la convention de couleur HSL pour spécifier l'opacité d'une couleur.

Exemple 6: Étendons un peu le code ci-dessus et ajoutons le paramètre alpha dans le HSL:

Color d'arrière-plan utilisant le code couleur HSLA

Bienvenue à Linuxhint.com

Bienvenue à Linuxhint.com

La sortie prouvera que le paramètre alpha a ajouté l'opacité à la couleur d'arrière-plan comme indiqué ci-dessous:

Conclusion

CSS a utilisé une propriété d'arrière-plan pour implémenter la couleur d'arrière-plan sur un élément, une page, etc. La couleur d'arrière-plan peut être attribuée à l'aide de plusieurs manières comme en spécifiant le nom de la couleur, la valeur hexadécimale, la valeur RVB, etc.

Cet article a considéré les crises de couleur multiple pour la propriété de couleur arrière. Il fournit un guide détaillé sur la façon d'appliquer la couleur d'arrière-plan à l'aide de «Nom de couleur», «valeurs hexadécimales», «RGB, codes couleur RGBA» et «codes de couleur HSL, HSLA».