在 div 内拉伸背景并使其可滚动

Question

我有一个登陆页面，它应该在页面加载时包含一个拉伸的背景图像，并且底部内容在向下滚动时不应该对用户可见，并且内容不应该作为图像的背景。这是我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; 会从文档流中删除元素，并且不会再以您期望的方式与页面上的元素交互。

如果您删除它，它将滚动。很抱歉，但我无法理解内容与图片相关的位置。您能否澄清一下，以便我可以帮助您解决剩下的问题？