Arrière-plan CSS (Arrière-plan)

Les attributs de fond CSS sont utilisés pour définir le style de fond d'un élément. CSS Fond ici fait référence à la définition des attributs de fond par CSS, comme la définition de divers styles de fond par CSS.

Attributs de fond

Les attributs de fond CSS fournissent plusieurs propriétés pour le fond d'un élément, comme :background-color,background-image,background-repeat,background-attachmentetbackground-positionLa prochaine section présentera la manière d'utiliser ces attributs pour définir différents styles de fond.

Couleur d'arrière-plan

background-colorL'attribut est utilisé pour définir la couleur d'arrière-plan d'un élément.

L'exemple suivant montre comment définir la couleur d'arrière-plan d'une page web.

body {background-color:　#f0e68c;}

Les couleurs CSS sont généralement spécifiées par les méthodes suivantes :

• Valeur hexadécimale-Par exemple "#ff0000"

• Valeur RGB-Par exemple " rgb(255,0,0）

• Noms de couleurs-comme "rouge"

VoirNoms de couleurs CSSpour obtenir une liste complète des noms de couleurs possibles.

Image de fond

background-imageL'attribut fixe l'image comme arrière-plan d'un élément HTML.

Voir l'exemple ci-dessous, qui démontre comment définir l'image de fond d'une page.

body {background-image: url("leaf.jpg");

répétition de l'arrière-plan

Par défaut, lebackground-imagel'attribut pour répéter l'image dans les directions horizontale et verticale.

En utilisantbackground-repeatL'attribut vous permet de contrôler la manière dont l'image de fond est répétée dans le fond d'un élément HTML. Vous pouvez définir une répétition verticale (sur l'axe y), horizontale (sur l'axe x), bidirectionnelle ou répétition bidirectionnelle de l'image de fond.

Voir l'exemple ci-dessous, qui démontre comment définir un arrière-plan dégradé pour une page web en répétant l'image en tranches horizontales.

body　{
　　　　background-image: url("gradient.png");
　　　　background-repeat: repeat-x;
　　　　}

Attachement de l'image de fond

background-attachmentL'attribut détermine si l'image de fond est fixe par rapport à la viewport ou si elle roule avec le conteneur.

body　{
　　　　width:　250px;
　　　　height:　200px;
　　　　overflow:　scroll;
　　　　background-image:　url("recycle.jpg");
　　　　background-attachment:　fixed;
　　　　}

Position du fond

background-positionL'attribut est utilisé pour contrôler la position de l'image de fond.

Si nonbackground-positionspécifié, l'image sera placée à la position par défaut en haut à gauche de l'élément, c'est-à-dire(0,0). Voir les exemples suivants :

body　{
　　　　background-image:　url("tree.jpg");
　　　　background-repeat:　no-repeat;
　　　　}

Dans l'exemple suivant, l'image de fond est située dans le coin supérieur droit, et la position de l'image est déterminée parbackground-positionattribut spécifié.

body　{
　　　　background-image:　url("tree.jpg");
　　　　background-repeat:　no-repeat;
　　　　background-position:　100%　top;
　　　　}

Abréviation des propriétés de fond

Comme on peut le voir dans l'exemple ci-dessus, de nombreux attributs doivent être pris en compte lors du traitement du fond. Tous ces attributs peuvent également être spécifiés dans une seule propriété pour raccourcir le code. Cela s'appelle une propriété abrégée.

desbackgroundLes propriétés sont utilisées pour définir toutes les propriétés individuelles du fond (c'est-à-dire, les propriétés abrégées)background-color,background-image,background-repeat,background-attachmentetbackground-position）Une fois. Par exemple :

body　{
　　　　background-color:　#f0e68c;
　　　　background-image:　url("smiley.png");
　　　　background-repeat:　no-repeat;
　　　　background-attachment:　fixed;
　　　　background-position:　250px　25px;
　　　　}

En utilisant l'abréviation, l'exemple ci-dessus peut être écrit :

body　{background:　#f0e68c　url("smiley.png")　no-repeat　fixed　250px　25px;}

UtiliserbackgroundLors de l'utilisation de l'abréviation, l'ordre des valeurs des propriétés doit être le suivant.

Fond:Couleur Image Répétition Annexe Position ;

Si la valeur d'une propriété de fond individuelle manque ou n'est pas spécifiée lors de l'utilisation des abréviations, la valeur par défaut de cette propriété (s'il y en a une) sera utilisée.