Div Background Color Comment modifier la couleur d arrière-plan en CSS

Questions courantes

Qu’est-ce que la propriété background-color en CSS ?

La propriété background-color en CSS permet de définir la couleur d’arrière-plan d’un élément HTML.

Comment définir une couleur d’arrière-plan en CSS ?

Vous pouvez définir une couleur d’arrière-plan en utilisant la propriété background-color et en spécifiant la couleur souhaitée.

Quels sont les différents types de couleurs que l’on peut utiliser en CSS ?

Vous pouvez utiliser des couleurs nommées, des couleurs hexadécimales, des couleurs RVB ou des couleurs HSL.

Si vous travaillez sur un projet de développement Web, la définition d’une belle couleur d’arrière-plan peut donner au site Web un aspect plus attrayant.

Pour définir une couleur d’arrière-plan pour un div ou un élément connexe en CSS, vous utilisez la propriété background-color.

Lorsque vous définissez cette couleur d’arrière-plan, votre créativité est votre limite pour aller jusqu’au bout.

Dans cet article, je vais donc vous montrer comment vous pouvez définir cette couleur d’arrière-plan.

## Comment définir la couleur d’arrière-plan avec des couleurs nommées

Avec les couleurs nommées, vous pouvez définir la couleur d’arrière-plan en faisant intervenir la propriété background-color et en lui attribuant une valeur exprimée par un nom de couleur comme rouge, vert, bleu, etc.

div { fond : vert ; }

Vous pouvez utiliser les styles suivants pour améliorer l’apparence de la page Web. Il suffit de définir une largeur et une hauteur pour la division, afin que la couleur d’arrière-plan prenne effet :

`body { display : flex ; align-items : center ; justify-content : center ; hauteur : 100vh ; background-color : #d3d3d3 ; }

div { background : green ; }` Les navigateurs modernes reconnaissent environ 147 couleurs, vous êtes donc encore un peu limité.

Comment définir la couleur d’arrière-plan avec des couleurs hexadécimales ?

Avec les valeurs hexadécimales, vous pouvez définir une couleur d’arrière-plan pour un div ou tout autre élément avec un total de 6 caractères.

Les couleurs hexadécimales commencent par le signe dièse (#), un nombre quelconque de 0 à 9, et enfin une lettre quelconque de A à F.

Les deux premières valeurs représentent le rouge, les deux suivantes le vert et les deux dernières le bleu.

Avec les valeurs hexadécimales, vous pouvez vous plonger dans la roue des couleurs et même utiliser des couleurs que personne n’a jamais utilisées.

div { background : #2ecc71 ; }


Comment définir la couleur d’arrière-plan avec les couleurs RVB

RVB signifie rouge, vert et bleu.

Pour définir la couleur d’arrière-plan avec RGB, vous spécifiez la quantité de rouge, de vert et de bleu que vous souhaitez avec des nombres compris entre 0 et 255.

div { background : rgb(220, 20, 60) ; }

RGB a également une variante appelée RGBA. Le dernier A signifie alpha et vous permet de déterminer le degré d’opacité de la couleur.

L’alpha prend une valeur comprise entre 0,0 et 1,0. 0.0 signifie une opacité de 0 %, 0,5 une opacité de 50 % et 1,0 une opacité de 100 %.

div { background : rgb(220, 20, 60, 0.6) ; }

## Comment définir la couleur d’arrière-plan avec les couleurs HSL

HSL est l’abréviation de Hue, Saturation et Lightness. Il s’agit de la méthode la plus dynamique pour définir une couleur d’arrière-plan pour une division ou d’autres éléments.

• Lateinte

représente la roue des couleurs sur 360°. 0° correspond au rouge, 120° au vert et 240° au bleu

• Lasaturation

est la quantité de gris dans la couleur exprimée en pourcentages. 0% est la nuance de gris et 100% est la couleur elle-même.

• Comme son nom l’indique, la clarté

est la quantité d’obscurité et de clarté dans la couleur exprimée en pourcentage. 0% est le noir et 100% le blanc.

div { background : hsl(16, 100%, 50%) ; }

Conclusion

Puisque vous pouvez appliquer des couleurs de 4 manières différentes, vous devez vous demander laquelle vous devez utiliser.

Lorsque vous utilisez des couleurs nommées, vous êtes en quelque sorte limité dans l’application de différentes nuances de couleurs.

Chaque couleur comme le rouge, le vert, le bleu, le jaune ou toute autre couleur a beaucoup de variations auxquelles vous n’aurez pas accès avec les couleurs nommées.

Vous ne pouvez accéder qu’à environ 147 couleurs prédéfinies reconnues par les navigateurs.

Les couleurs hexadécimales, en revanche, sont très dynamiques. Elles sont surtout utilisées par les développeurs, et la créativité est la limite. Ces couleurs hexadécimales vous permettent d’utiliser différentes nuances d’une même couleur.

Les couleurs RVB sont aussi dynamiques que les couleurs hexadécimales. Vous pouvez spécifier la quantité de rouge, de vert et de bleu de 0 à 255, et vous pouvez également utiliser la valeur alpha ajoutée pour spécifier la transparence de la couleur.

HSL est le plus dynamique de tous. Vous pouvez spécifier exactement la couleur de 0 à 360 degrés dans la roue chromatique, définir la saturation et l’obscurité en pourcentage, et définir l’opacité à n’importe quelle valeur entre 0,0 et 1,0.

Le choix entre les couleurs nommées, hexagonales, RVB et LSH dépend donc de vous, de votre créativité et des besoins de votre projet.

Merci de votre lecture.

FAQ

Quelle est la différence entre les couleurs nommées et les couleurs hexadécimales ?

Les couleurs nommées sont des couleurs prédéfinies qui peuvent être utilisées pour définir la couleur d’arrière-plan d’un élément. Les couleurs hexadécimales, en revanche, sont des codes qui représentent une couleur spécifique.

Comment définir une couleur d’arrière-plan avec les couleurs RVB ?

Vous pouvez définir une couleur d’arrière-plan avec les couleurs RVB en utilisant la fonction rgb() et en spécifiant les valeurs de rouge, de vert et de bleu.

Qu’est-ce que la fonction HSL en CSS ?

La fonction HSL (Hue, Saturation, Lightness) est utilisée pour définir une couleur en fonction de sa teinte, de sa saturation et de sa luminosité.

Comment corriger ses commentaires sur Instagram après leur publication ?

Vous pouvez corriger vos commentaires sur Instagram après leur publication en utilisant la fonction de correction de texte proposée par l’application. En savoir plus sur la correction de commentaires sur Instagram.

À lire aussi sur le site

• XChat arrive sur iOS : découvrez toutes ses fonctionnalités et comment y accéder
• Instagram offre désormais la possibilité de corriger ses commentaires après leur publication
• Code Santé : comment l’association Crazy Esport révolutionne la prévention santé chez les gamers à travers le manga