如何在 HTML/CSS 中创建跟踪视口的背景？

Question

我正在尝试建立一个网站，我的目标是创建一个跟踪客户端视图端口的背景。因此，当客户端滚动浏览文本时，背景保持不变。

我以前在某个网站上看到过这个，但想不起来了。

我怎样才能做到这一点？

Answer 1

在这里。我给 div 自定义高度只是为了举例，因为它的高度是 = 到内部内容。

For client viewport you have to set min-height to 100vh (vh: viewport height) & width: 100%;

body {
  margin: 0;
  background: url('https://images.unsplash.com/photo-1574969970937-a90cdcbeea2e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80') no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  padding: 60px;
  min-height: 100vh;
}

div {
  height: 800px;
  background: rgba(255, 255, 255, .6);
  padding: 20px;
  text-align: center;
}

<body>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, porro ab repellat doloremque reprehenderit dolor minus dolores quia eveniet ducimus, amet, ipsum quidem nesciunt illo assumenda! Architecto distinctio delectus dolorum odio culpa est,
      labore repellendus numquam repellat consequuntur in officiis optio atque, illum ratione eos neque et accusantium iusto voluptas natus dolore sint impedit dignissimos ex. Earum quae impedit obcaecati molestiae minus numquam rerum quos debitis temporibus
      ullam enim rem, quia sit quo? Ad accusantium fugit corporis eligendi numquam nam inventore similique, cumque velit doloribus quis quidem illo dolorem delectus quo magni iusto ab quaerat odit porro. Praesentium, dolor, porro.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, porro ab repellat doloremque reprehenderit dolor minus dolores quia eveniet ducimus, amet, ipsum quidem nesciunt illo assumenda! Architecto distinctio delectus dolorum odio culpa est,
      labore repellendus numquam repellat consequuntur in officiis optio atque, illum ratione eos neque et accusantium iusto voluptas natus dolore sint impedit dignissimos ex. Earum quae impedit obcaecati molestiae minus numquam rerum quos debitis temporibus
      ullam enim rem, quia sit quo? Ad accusantium fugit corporis eligendi numquam nam inventore similique, cumque velit doloribus quis quidem illo dolorem delectus quo magni iusto ab quaerat odit porro. Praesentium, dolor, porro.</p>
  </div>
</body>

如何在 HTML/CSS 中创建跟踪视口的背景？

How can I create a background that tracks the viewport in HTML/CSS?

html

css

background-image