使用引导程序时如何将图像设置为容器的背景

【问题标题】：How to set an image as a background for a container when using bootstrap使用引导程序时如何将图像设置为容器的背景
【发布时间】：2023-03-28 13:20:01
【问题描述】：

我正在尝试将图像 (.jpg) 设置为我的一半页面的背景，该页面是容器之一。我可以将背景设置为纯色，但是当我将其设置为图像时，有些东西不起作用，它会变回白色。下面是我的 CSS ..

.container {
background-image: url("background-image.jpg");
}

html 很长，所以我将其省略。请注意，我正在使用引导程序使网页响应地调整大小。谢谢！

【问题讨论】：

【解决方案1】：

您可以使用 background-size 属性并将其设置为包含，这将在包含该类的元素内放置一个图像。这是一个例子https://jsfiddle.net/p9oak4b7/1/

    .container {
   background-image: url("background-image.jpg");
   background-size: contain;
   }

编辑：

将此类添加到您的样式表中，并将其添加到容器中，这里是一个包含容器流体https://imgur.com/c9cmbNB的示例

    .image {
   background-image: url("background-image.jpg");
   background-size: cover;
   }

【讨论】：