Modifier la couleur de fond du contenu HTML avec background-color CSS

Dans cette nouvelle partie, nous allons nous intéresser à la personnalisation du fond de nos boites éléments en CSS et commençant ici avec l’ajout d’une couleur de fond qui va être possible avec la propriété background-color ou avec la notation background dont nous reparlerons dans la leçon suivante.

 

Le champ d’application de background-color

Tout élément HTML est avant tout une boite rectangulaire qui peut être composée d’un contenu, de marges internes, d’une bordure et de marges externes.

Lorsqu’on ajoute une couleur de fond à un élément, cette couleur va remplir l’espace pris par le contenu et les marges internes. En revanche, la couleur de fond ne s’appliquera pas aux marges externes qui sont considérées comme « en dehors » de l’élément.

Notez par ailleurs une chose intéressante ici : lorsqu’on donne une couleur de fond à un élément parent, on « dirait » que les éléments enfants en héritent. En réalité, ce n’est pas tout à fait correct : les éléments ont par défaut un background-color : transparent et c’est la raison pour laquelle la couleur de fond de l’élément parent va également remplir l’espace pris par les éléments enfants sauf si on spécifie une couleur de fond différente pour eux.

 

Les valeurs de couleur de background-color

La propriété CSS background-color va accepter les mêmes notations de couleurs que la propriété color c’est-à-dire toutes les formes de notations de couleurs en CSS. On va ainsi pouvoir lui passer :

• Un nom de couleur de anglais ;
• Une valeur hexadécimale ;
• Une valeur RGB (ou RGBa) ;
• Une valeur HSL (ou HSLa).

 

Exemples d’utilisation de background-color en CSS

Attribuer un background-color opaque à un élément

Nous allons pouvoir ajouter une couleur de fond opaque à un élément en utilisant soit une notation de couleur de type nom de couleur, soit une notation hexadécimale, soit une notation RGB ou HSL.

See the Pen Cours HTML CSS 9.1.1 by Pierre (@pierregiraud) on CodePen.

Ici, j’ai ajouté un padding c’est-à-dire des marges intérieures, une bordure et des marges externes aux différents paragraphes afin de rendre l’exemple plus visuel et que vous voyiez bien à quoi s’applique le background-color en CSS.

Ajouter un background-color semi transparent à un élément

Nous allons également pouvoir ajouter une couleur de fond semi transparente à un élément en utilisant cette fois-ci les notations RGBa.

Notez bien ici qu’utiliser la propriété opacity sur nos éléments ne produirait pas le comportement voulu puisque l’intégralité de nos éléments (contenu et bordure compris) serait alors semi transparent or nous voulons que seulement le fond de l’élément soit transparent.

See the Pen Cours HTML CSS 9.1.2 by Pierre (@pierregiraud) on CodePen.

Ajouter différentes couleurs de fond à un élément parent et à ses enfants

Finalement, notez qu’on va tout à fait pouvoir ajouter différents background-color à différents éléments imbriqués. Dans ce cas-là, la couleur de fond définie pour chaque élément s’appliquera à l’élément en question.

See the Pen Cours HTML CSS 9.1.3 by Pierre (@pierregiraud) on CodePen.

Ici, vous pouvez noter que le background-color ne s’applique que sur l’arrière-plan du contenu de notre span ce qui est tout à fait normal puisqu’un élément span est un élément de type inline par défaut et ne prend donc que l’espace nécessaire à son contenu en largeur.