Comment définir l'arrière-plan CSS

CSS permet d'appliquer une couleur unie comme arrière-plan, ainsi que de créer des effets assez complexes à l'aide d'images d'arrière-plan.

CSS est de loin supérieur au HTML à cet égard. (Apprentissage recommandé : Tutoriel de base CSS)

Couleur d'arrière-plan

Vous pouvez utiliser l'attribut background-color pour définir la couleur d'arrière-plan d'un élément . Cette propriété accepte toute valeur de couleur légale.

Cette règle définit l'arrière-plan de l'élément en gris :

p {background-color: gray;}

Si vous souhaitez que la couleur d'arrière-plan s'étende moins vers l'extérieur du texte de l'élément, ajoutez simplement un peu Remplissage :

p {background-color: gray; padding: 20px;}

peut définir la couleur d'arrière-plan de tous les éléments, y compris le corps jusqu'aux éléments en ligne tels que em et a.

background-color ne peut pas être hérité et sa valeur par défaut est transparente. Transparent signifie « transparent ». Autrement dit, si un élément ne spécifie pas de couleur d'arrière-plan, l'arrière-plan est transparent afin que l'arrière-plan de ses éléments ancêtres soit visible.

Image d'arrière-plan

Pour mettre une image en arrière-plan, vous devez utiliser l'attribut background-image. La valeur par défaut de la propriété background-image est none, ce qui signifie qu'aucune image n'est placée en arrière-plan.

Si vous devez définir une image d'arrière-plan, vous devez définir une valeur URL pour cet attribut :

body {background-image: url(/i/eg_bg_04.gif);}

La plupart des arrière-plans sont appliqués à l'élément body, mais c'est ne se limite pas à cela.

L'exemple suivant applique un arrière-plan à un paragraphe sans appliquer d'arrière-plan au reste du document :

p.flower {background-image: url(/i/eg_bg_03.gif);}

Vous pouvez même définir une image d'arrière-plan pour les éléments en ligne, L'exemple suivant définit une image d'arrière-plan pour un lien :

a.radio {background-image: url(/i/eg_bg_07.gif);}

En théorie, il est même possible d'appliquer une image à l'arrière-plan d'éléments de remplacement tels que les zones de texte et les sélections, mais pas tous les agents utilisateurs peuvent bien gérer la situation.

De plus, il convient d'ajouter que l'image d'arrière-plan ne peut pas être héritée. En fait, toutes les propriétés d’arrière-plan ne sont pas héritées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!