Gérer les couleurs et les fonds

Couleur du texte

La propriété « color »

On peut définir la couleur du texte avec la propriété « color ».
C’est une propriété héritée : les éléments enfants reprennent la couleur définie sur leur parent.

Utiliser un nom de couleur

Il existe un certain nombre de couleurs prédéfinies en CSS.
Certaines existent depuis CSS1, d’autres ont été ajoutées avec CSS2 et CSS3.
On peut retrouver la liste complète ici.

Utilisation d'un mot-clé pour définir la couleur.

Utiliser la notation hexadécimal

Les couleurs prédéfinies sont limitées, mais on peut en créer des millions grâce aux codes hexadécimaux.
Un code commence par un dièse (#) suivi de six caractères combinant chiffres (0–9) et lettres (A–F) :

• les deux premiers indiquent la part de rouge,
• les deux suivants celle de vert,
• et les deux derniers celle de bleu.

• #000000 → noir
• #FFFFFF → blanc

Utilisation d'un code hexadécimal.

Utiliser la méthode RGB

RGB signifie Red-Green-Blue (Rouge-Vert-Bleu).
Ce format fonctionne comme la notation hexadécimale, mais avec une syntaxe différente : on indique directement les valeurs de rouge, vert et bleu sous forme de nombres.

Utilisation de la fonction « rgb ».

Couleur de fond

On définit la couleur de fond d’un élément avec la propriété « background-color ».
Elle s’utilise comme la propriété « color » et accepte les mêmes types de valeurs : un mot-clé, un code hexadécimal ou une valeur RGB.

Démonstration de la propriété avec différentes valeurs.

Image de fond

Définir l’image

Pour appliquer une image de fond, on utilise la propriété « background-image ».
L’image est définie dans une fonction url(), en indiquant un chemin relatif ou absolu.

Répétition

La propriété « background-repeat » permet de choisir si l’image se répète ou non :

• repeat — par défaut, l’image se répète sur tout l’élément
• no-repeat — l’image n’est affichée qu’une seule fois
• repeat-x — répétition horizontale
• repeat-y — répétition verticale

Position de l’image

On définit la position de l’image avec la propriété « background-position ».
Elle accepte les valeurs top, bottom, left, right et center, éventuellement suivies d’une unité (px, em, %, etc).

Taille de l’image

La propriété « background-size » permet d’ajuster les dimensions de l’image.

• contain — agrandit l’image au maximum sans la déformer
• cover — couvre tout le bloc, quitte à rogner ou déformer l’image
• ou des valeurs précises (%, px, em...) pour largeur et hauteur

Fixation

On peut choisir si l’image défile avec la page ou si elle reste fixe grâce à la propriété « background-attachment » :

• scroll — l’image défile avec la page (valeur par défaut)
• fixed — l’image reste fixe lors du défilement

Exemple d'utilisation des propriétés.

Rendu visuel de l’image de fond : centrée, affichée en entier et répétée trois fois.

Créer des effets de fusion entre image et couleur

Exemple d’utilisation de la propriété « background-blend-mode ».

Transparence

Utiliser l’opacité

On peut ajuster la transparence d’un élément avec la propriété « opacity ».
Elle accepte une valeur comprise entre 0 et 1 :

• 0 — totalement transparent
• 1 — totalement opaque

Application d’une opacité de 0.4 à tout le paragraphe.

Ici, la propriété « opacity » est appliquée au paragraphe entier : le fond et le texte deviennent partiellement transparents.

Utiliser une couleur transparente

Nous avons vu le système RGB.
Le système RGBA fonctionne de la même façon, mais ajoute une quatrième valeur : l’opacité (ou canal alpha), qui définit la transparence de la couleur.
Elle varie de 0 (transparent) à 1 (opaque).

Application d’une opacité de 0.4 à la couleur de fond.

La transparence est définie directement pour le fond avec RGBA, donc seul le fond est transparent.