粘性背景图片/w CSS [英] Sticky Background Image /w CSS

问题描述

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

I’m currently creating my first website and I am nearing completion. I am using a background image for the main body under the header. I am finding an issue with each of my pages cause they are all different in height making the current settings I have for my background image enlarge the picture to fit the full page. What I am trying to do is have a background image set "sticky". My idea is that the background image would be directly under the header and when scrolling downwards the image would eventually reach top of screen then stay fixed. I think this way I could set the picture to the fit the screen size only and not the entire page.

有什么建议吗?

推荐答案

我知道这个答案有点晚了，但是它可能会派上用场，以备将来参考
尝试使用粘稠的背景

I know this answer a bit late but it might come in handy for future reference
Try using 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>

这篇关于粘性背景图片/w CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！