使用Bootstrap 5时，将主体的背景设置为图像

Question

我很好奇如何将整个网页背景(身体)设置成一个图像。理想情况下，我想淡出一点图像，这样它就不会压倒一切。

<style>
    body {
        background-image:url("{% static 'portfolio/cherry_blossoms.jpg' %}"),
    }
</style>

我试图将它添加到html主体中，但是它没有返回结果。注意:我使用的是引导带5。

Answer 1

​

<div class="bg-image" 
     style="background-image: url('https://mdbootstrap.com/img/new/standard/city/041.jpg');
            height: 100vh">
</div>

​

上面的代码片段是如何向网页中添加背景信息的。所使用的图像是输出的一个示例。

如果你看height: 100vh;，这基本上是说“使用100%的可用高度”，而vh是视图。

现在，您确实希望使其褪色，下面是引导中已褪色的背景的一个示例。

​

.covered {
  position: relative;
  /* make a new "render context", so absolute positioning is relative to this parent container */
  padding: 30px;
  /* only needed for this demo */
}

.covered-img {
  background: url('https://farm3.staticflickr.com/2672/3868702369_67d72be6e8.jpg');
  opacity: .25;
  background-size: cover;
  /* cover will scale the image so that the smallest dimension = the widest dimension of the box */
  background-position: center;
  /* vs the top-left that is default */
  position: absolute;
  /* take me out of the render context! let me define my own positioning */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* this could also work with width:100%; height:100%;, but is simpler */
}

<div class="row">
  <div class="col-xs-12 covered">
    <div class="covered-img"></div>

    <p>Placeholder Text
      <p>
  </div>
</div>

​

每个有帮助的堆栈溢出用户，代码可以在下面解释

如何工作：通过将img作为父容器中的第一个子容器，它首先被绘制。绝对定位保证它填充父容器大小，容器的相对位置意味着子容器的绝对值相对于父容器。(否则，与身体相比，图像将是绝对的，并填满整个窗口)。然后，绘制文本，并在图像之后定义文本，然后呈现next，在图像的顶部绘制。

现在，让我们将褪色的样式应用于背景图像

​

.covered {
  position: relative;
  /* make a new "render context", so absolute positioning is relative to this parent container */
}

.covered-img {
  background: url('https://mdbootstrap.com/img/new/standard/city/041.jpg');
  opacity: .25;
  height: 100vh;
  background-size: cover;
  /* cover will scale the image so that the smallest dimension = the widest dimension of the box */
  background-position: center;
  /* vs the top-left that is default */
  position: absolute;
  /* take me out of the render context! let me define my own positioning */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* this could also work with width:100%; height:100%;, but is simpler */
}

<div class="row">
  <div class="col-xs-12 covered">
    <div class="covered-img"></div>
    <p>Placeholder Text
      <p>
  </div>
</div>

​

这是一篇关于Bootstrap 5图片背景的有用文章！