Question

我正在创建我的第一个网站，我即将完成。我在标题下使用主体的背景图像。我发现每个页面都有问题，因为它们的高度都不同，因此我对背景图像的当前设置会放大图片以适应整页。我想要做的是将背景图像设置为“粘性”。我的想法是背景图像将直接位于标题下方，当向下滚动时，图像最终会到达屏幕顶部，然后保持固定。我想这样我可以将图片设置为仅适合屏幕尺寸，而不是整个页面。

有什么建议吗？

Answer 1

我知道这个答案有点晚，但它可能会派上用场以供将来参考
尝试使用 Sticky background

这是示例代码：

html,
body {
  margin: 0;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
}

#header {
  height: 100px;
  width: 100%;
  background: black;
}

#rest {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background: blue;
}

#content {
  width: 50%;
  z-index: 0;
  grid-row: 1;
  grid-column: 1;
  margin: 0 auto;
  background: yellow;
}

#sticky_back {
  width: 100%;
  height: 100vh;

  grid-row: 1;
  grid-column: 1;
  position: sticky;
  top: 0;
  background-image: url("https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  background-repeat: no-repeat;
  background-size: cover;
}

<div id="header"></div>
  <div id="rest">
    <div id="sticky_back"></div>
    <div id="content">
      <span>
        psum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim vennostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut laborere magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut alnostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut laborere magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut alnostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim e et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostididunt ut laborere magna aliqua. Ut enim ad minim veniam, quis nostididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio
      </span>
    </div>
  </div>

Answer 2

您可以在CSS中为背景设置不同的属性。

background-clip     Specifies the painting area of the background
background-image    Specifies one or more background images for an element
background-origin   Specifies where the background image(s) is/are positioned
background-size     Specifies the size of the background image(s)

以下代码将修复您的背景：

background: url('picture.jpg') no-repeat fixed;

使'粘'＆＃39;效果，检查CSS位置文档。

带

的元素

position: sticky;

根据用户的滚动位置定位。

Internet Explorer，Edge 15及更早版本不支持粘性定位。 Safari需要-webkit-前缀。您还必须指定顶部，右侧，底部或左侧中的至少一个才能使粘性定位起作用。

粘性背景图像/ w CSS

2 个答案: