image - 在 div 内拉伸(stretch)背景并使其可滚动

Question

我有一个着陆页，它应该在页面加载时包含一个拉伸(stretch)的背景图像，底部内容不应该在向下滚动时对用户可见，并且内容不应该作为背景图像。这是我try

但在这种情况下图像不会滚动

标记

<div class="home">
    <img src="/wp-content/themes/clothes/assets/img/bg.png" class="bg">
</div>
<div class="container">
    <div class="row"><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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
</div>

CSS

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

Answer 1

简而言之，图像不会滚动，因为使用 position:fixed; 或 position:absolute; 将从文档流中删除该元素并且将不再交互以您可能期望的方式使用页面上的元素。

如果您删除它，它将滚动。抱歉，我无法理解内容相对于图像的位置。您能否澄清一下，以便我可以帮助您解决其余问题？