bootstrap背景图片怎么弄

也想出现在这里？点击联系我~

Bootstrap 背景图片设置

在 Bootstrap 中，设置背景图片非常简单。下面介绍两种方法：

方法 1：使用 CSS 规则

1. 为要应用背景图片的元素添加以下 CSS 规则：

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

   2. 将 path/to/image.png 替换为要使用的图像的路径。
   3. 可根据需要设置其他背景属性，如：

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

   方法 2：使用 Bootstrap 实用程序类

   1. 为要应用背景图片的元素添加以下实用程序类：

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

   2. 在样式表中，为 .bg-image 类添加以下规则：

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

   注意：

   • 背景图片的路径可以是绝对路径或相对于当前 HTML 文档的相对路径。
   • 可以使用媒体查询为不同的设备大小加载不同的背景图片。
   • 还可以使用 background-position 属性来控制背景图片在元素中的位置。