Question

我想知道为什么div容器（background-box-2）不透明。在我看来，它应该是透明的。如果您正在滚动，则应该查看固定的背景图像。我的错是什么？谢谢:)

＆＃13;

.background-box {
  height: 1000px;
  width: 100%;
  background-image: url(http://images.car.bauercdn.com/pagefiles/72609/mclaren-720s-01.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.background-box-2 {
  width: 100%;
  height: 250px;
  background: rgba(255, 255, 255, 0.8);
}

＆＃13;

<div class="background-box">
</div>
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  S
</p>
<div class="background-box-2">
</div>
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  S
</p>

＆＃13;

Answer 1

它是透明的，但除了白色空间外，它不会覆盖任何东西。添加位置：绝对或等级以使其与其他元素重叠。

Answer 2

您已为第一个div提供了背景图片，其中不包含任何内容。您应该获取第一个div内的所有内容，因此背景图像将应用于该div中的每个内容。

Answer 3

你只是提前关闭了第一个div：

＆＃13;

.background-box {
height: 1000px;
width: 100%;
background-image:url(https://lorempixel.com/1000/1000/);
background-repeat:no-repeat;
background-attachment:fixed;

}
.background-box-2 {
width: 100%;
height: 250px; 
background: rgba(255, 255, 255, 0.8);
}

＆＃13;

<div class="background-box">
<!-- </div> put this at the end-->
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. S</p>
<div class="background-box-2">

</div>

<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. S
</p>
</div>

＆＃13;

Answer 4

这是一个很好的问题，这里有一些帮助：

首先，您要创建包含背景图片的div background-box
然后，您创建第二个包含文本的div background-box-2。

你遇到的问题是你的第一个div实际上没有被第二个div重叠！

但是，我该如何解决这个问题？

嗯，你需要确保你的第一个div在用户向下滚动时保持不变。您可以使用position: fixed来实现此目标（MDN - Position）。

＆＃13;

.background-box {
  height: 1000px;
  width: 100%;
  background-image: url(http://images.car.bauercdn.com/pagefiles/72609/mclaren-720s-01.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: fixed;
  z-index: -1;
}
.background-box-2 {
  margin-top: 1000px;
  width: 100%;
  height: 250px;
  background: rgba(255, 255, 255, 0.8);
}

＆＃13;

<div class="background-box">
</div>
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  S</p>
<div class="background-box-2">

</div>

<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  S
</p>

＆＃13;

请注意，我们还需要将z-index: -1设置为background-box（以使其保持在background-box-2下）并将margin-top: 1000px设置为background-box-2以保持页面可滚动。

希望我能帮助:)。

参考文献：

为什么div容器不透明

4 个答案:

但是，我该如何解决这个问题？