Comment définir l'arrière-plan d'une image en HTML ? Introduction aux propriétés d'arrière-plan

Dans la conception de sites Web, nous devons parfois utiliser des images comme arrière-plans pour embellir les pages Web. HTML fournit une variété de méthodes pour définir l'arrière-plan des images. Cet article explique comment utiliser l'attribut background de CSS pour définir l'arrière-plan des images.

1. Utilisez l'attribut background-image pour définir l'arrière-plan de l'image

L'attribut background-image est utilisé pour définir l'image d'arrière-plan de l'élément. Il peut spécifier un ou plusieurs fichiers image et peut être utilisé avec d'autres attributs d'arrière-plan.

La syntaxe est la suivante :

background-image: url(path);

Parmi elles, url() précise le chemin de l'image, qui peut être un chemin relatif ou un chemin absolu. Par exemple, le code suivant définit un arrière-plan d'image :

body {
  background-image: url(bg.jpg);
}

Dans cet exemple, l'image bg.jpg sera utilisée comme arrière-plan de la page entière. A noter qu’en HTML, on place ce code CSS dans la balise style ou dans un fichier CSS externe.

2. Utilisez l'attribut background-repeat et l'attribut background-position

Nous devons généralement également définir la méthode de répétition et la position de l'image. À ce stade, nous devons utiliser l'attribut background-repeat et l'attribut background-position. .

1. attribut background-repeat

l'attribut background-repeat est utilisé pour définir le mode de répétition de l'image d'arrière-plan. Il peut prendre les valeurs suivantes :

• repeat : Valeur par défaut, l'image d'arrière-plan sera affichée à plusieurs reprises dans le fichier. directions horizontales et verticales.
• repeat-x : Répétez l'affichage uniquement dans le sens horizontal.
• répéter-y : Répéter l'affichage uniquement dans le sens vertical.
• no-repeat : ne pas afficher à plusieurs reprises.

Par exemple, dans le code suivant, définissez l'image d'arrière-plan pour qu'elle se répète uniquement dans le sens horizontal :

body {
  background-image: url(bg.jpg);
  background-repeat: repeat-x;
}

2. attribut background-position

L'attribut background-position est utilisé pour définir la position de départ de l'image d'arrière-plan , qui peut être la suivante Valeur :

• top : L'image d'arrière-plan est affichée du haut.
• bas : L'image d'arrière-plan est affichée à partir du bas.
• centre : L'image d'arrière-plan est affichée au centre.
• gauche : L'image d'arrière-plan est affichée à partir de la gauche.
• droite : l'image d'arrière-plan s'affiche à partir de la droite.

Habituellement, nous pouvons utiliser la méthode suivante pour définir l'attribut background-position :

body {
  background-position: x-axis y-axis;
}

Parmi eux, l'axe des x et l'axe des y représentent le décalage par rapport à la gauche et au haut (des valeurs spécifiques​​peuvent utiliser des unités telles que sous forme de pixels et de pourcentages), si une seule valeur est définie, la valeur par défaut est le décalage horizontal et le décalage vertical est par défaut l'alignement central.

Par exemple :

body {
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
}

Dans cet exemple, définissez l'image d'arrière-plan pour qu'elle ne soit pas répétitive et commencez par le milieu en haut.

3. Utilisez l'attribut background-size

L'attribut background-size est utilisé pour définir la taille de l'image d'arrière-plan. Peut prendre les valeurs suivantes :

• auto : Valeur par défaut, l'image de fond est affichée dans sa taille d'origine.
• couverture : redimensionnez l'image d'arrière-plan pour couvrir complètement la zone de l'élément (l'image d'arrière-plan peut être recadrée).
• contain : Réduisez l'image d'arrière-plan autant que possible pour l'adapter complètement à la zone de l'élément (il peut y avoir un espace blanc).
• Spécifier la taille : vous pouvez spécifier la taille de l'image d'arrière-plan en utilisant des unités telles que les pixels et les pourcentages.

Par exemple, dans le code suivant, l'image d'arrière-plan est définie pour être aussi petite que possible pour s'adapter complètement à la zone de l'élément :

body {
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

Résumé

En utilisant l'attribut background, nous pouvons facilement définir l'image d'arrière-plan de l'élément. page web. Grâce aux quatre attributs background-image, background-repeat, background-position et background-size, nous pouvons définir le chemin, la méthode de répétition, la position de départ et la taille de l'image. Veuillez l'utiliser de manière flexible en fonction de vos besoins.

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!