Didacticiel de couleur d'arrière-plan HTML - Comment changer la couleur d'arrière-plan d'une div, expliqué avec des exemples de code

L'une des choses les plus courantes à faire en tant que développeur Web est de changer la couleur d'arrière-plan d'un élément HTML. Mais cela peut être déroutant à faire si vous ne comprenez pas comment utiliser la background-colorpropriété CSS .

Dans l'article, nous discutons

  • la valeur de couleur d'arrière-plan par défaut d'un élément HTML
  • comment changer la couleur d'arrière-plan d'un div, qui est un élément très courant
  • quelles parties du modèle de boîte CSS sont affectées par la background-colorpropriété, et
  • les différentes valeurs que cette propriété peut prendre.

Couleur d'arrière-plan par défaut d'un élément

La couleur d'arrière-plan par défaut d'un div est transparent. Donc, si vous ne spécifiez pas la couleur d'arrière-plan d'un div, il affichera celle de son élément parent.

Modification de la couleur d'arrière-plan d'une division

Dans cet exemple, nous allons changer les couleurs d'arrière-plan des divs suivants.

 I love HTML I love CSS I love JavaScript 

Sans aucun style, cela se traduira visuellement par ce qui suit.

Changeons la couleur d'arrière-plan des divs en ajoutant des styles aux classes. Vous pouvez suivre en essayant les exemples dans un fichier HTML.

 .div-1 { background-color: #EBEBEB; } .div-2 { background-color: #ABBAEA; } .div-3 { background-color: #FBD603; } I love HTML I love CSS I love JavaScript 

Cela entraînera ce qui suit:

Cool! Nous avons réussi à changer la couleur de fond de ce div. Ensuite, apprenons à en savoir plus sur cette propriété. Voyons comment la propriété background-color affecte certaines parties du modèle CSS-box.

Couleur d'arrière-plan et modèle de boîte CSS

Selon le modèle de boîte CSS, tous les éléments HTML peuvent être modélisés sous forme de boîtes rectangulaires. Chaque boîte est composée de 4 parties comme indiqué dans le schéma ci-dessous.

Vous pouvez consulter le modèle de boîte si vous ne le connaissez pas. La question est de savoir quelle partie du modèle de boîte est affectée lorsque vous modifiez la couleur d'arrière-plan d'un div? La réponse simple est la zone de remplissage et la zone de contenu. Confirmons cela en utilisant un exemple.

  body { background-color: #ABBAEA; } div { height: 200px; margin: 20px; border: 5px solid; background-color: #FBD603; } 

This is the parent div which contains the div we are testing

This example shows that changing the background color of a div does not affect the border and margin of the div.

Cela se traduira par:

Dans l'exemple ci-dessus, nous pouvons voir que la zone de marge et la zone de bordure ne sont pas affectées par le changement de couleur d'arrière-plan. Nous pouvons changer la couleur de la bordure en utilisant la propriété border-color. La zone de marge reste transparente et reflète la couleur d'arrière-plan du conteneur parent.

Enfin, discutons des valeurs que la propriété background-color peut prendre.

Valeurs de couleur d'arrière-plan

Tout comme la propriété color, la propriété background-color peut prendre six valeurs différentes. Considérons les trois valeurs les plus courantes avec un exemple. Dans l'exemple, nous définissons la couleur d'arrière-plan du div sur rouge avec des valeurs différentes.

 /* Keyword value/name of color */ .div-1 { background-color: red; } /* Hexadecimal value */ .div-2 { background-color: #FF0000; } /* RGB value */ .div-3 { background-color: rgb(255,0,0); } 

The background property can take six different values.

The background property can take six different values.

The background property can take six different values.

Notez qu'ils résultent tous de la même couleur d'arrière-plan.

Les autres valeurs que la background-colorpropriété peut prendre incluent la valeur HSL, les valeurs de mots clés spéciaux et les valeurs globales. Voici des exemples de chacun d'eux.

/* HSL value */ background-color: hsl(0, 100%, 25%; /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: unset; 

Vous pouvez en savoir plus sur chacune de ces valeurs ici.

Note supplémentaire

Lors de la définition de la couleur d'arrière-plan d'un élément, il est important de s'assurer que le rapport de contraste de la couleur d'arrière-plan et de la couleur du texte qu'il contient est suffisamment élevé. Cela permet aux personnes malvoyantes de lire facilement le texte.

Considérez ces deux divs.

Le contraste entre la couleur d'arrière-plan du premier div et la couleur du texte n'est pas assez élevé pour que tout le monde puisse le voir. Donc, à moins que vous ne soyez le seul à utiliser le site Web que vous créez et que vous ayez une très bonne vue, vous devez éviter de telles combinaisons de couleurs.

Le deuxième div a un bien meilleur rapport de contraste entre la couleur d'arrière-plan et la couleur du texte. Ainsi, il est plus accessible et plus clair pour les gens à lire.

Conclusion

Dans cet article, nous avons vu comment changer la couleur d'arrière-plan d'un div. Nous avons également discuté des parties du modèle de boîte CSS qui sont affectées par le changement de couleur d'arrière-plan. Enfin, nous avons discuté des valeurs que la propriété background-color peut prendre.

J'espère que vous avez trouvé cet article utile. Merci d'avoir lu.