Comment créer une image d'arrière-plan bootstrap

Il existe deux manières de définir l'image d'arrière-plan Bootstrap : utilisez les règles CSS pour ajouter une image d'arrière-plan : background-image: url(path/to/image.png); utilisez une classe utilitaire pour ajouter .bg-image et définissez les règles de la feuille de style, y compris le chemin de l'image d'arrière-plan, la taille et les paramètres de répétition.

Paramètres de l'image d'arrière-plan Bootstrap

Dans Bootstrap, définir une image d'arrière-plan est très simple. Deux méthodes sont présentées ci-dessous :

Méthode 1 : Utiliser les règles CSS

1. Ajoutez les règles CSS suivantes aux éléments auxquels vous souhaitez appliquer l'image d'arrière-plan :

<code class="css">background-image: url(path/to/image.png);</code>

2. Remplacez path/to/image.png avec celui que vous souhaitez utiliser Le chemin d'accès à l'image.
3. Vous pouvez définir d'autres attributs d'arrière-plan selon vos besoins, tels que :

<code class="css">background-size: cover;
background-repeat: no-repeat;</code>

Méthode 2 : utiliser la classe utilitaire Bootstrap

1. Ajoutez la classe utilitaire suivante à l'élément auquel vous souhaitez appliquer l'image d'arrière-plan :

<code class="html"><div class="bg-image"></div></code>

2. Dans la feuille de style, ajoutez les règles suivantes pour la classe .bg-image :

<code class="css">.bg-image {
  background-image: url(path/to/image.png);
  background-size: cover;
  background-repeat: no-repeat;
}</code>

Remarque :

• Le chemin vers l'image d'arrière-plan peut être un chemin absolu ou un chemin relatif par rapport à l'image actuelle. Document HTML.
• Vous pouvez utiliser des requêtes multimédias pour charger différentes images d'arrière-plan pour différentes tailles d'appareil.
• Vous pouvez également utiliser l'attribut background-position pour contrôler la position de l'image d'arrière-plan dans l'élément.

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!