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;会从文档流中删除该元素，并且不会再以您的方式与页面上的元素进行交互可能会有所期待。

如果删除它会滚动。对不起，我很难理解内容与图片的关系。你可以澄清一下，以便我可以帮助你完成其余的问题吗？

在div内拉伸背景，让我们可以滚动

1 个答案: