如何创建背景来跟踪HTML / CSS中的视口?

问题描述 投票:0回答:1

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

我以前在某个地方的网站上看到过,但是想不到。

我该如何实现?

html css background-image
1个回答
0
投票

这里是。我仅将div的自定义高度作为示例,因为它的高度为=等于内部内容。

对于客户端视口,您必须将最小高度设置为100vh(vh:视口高度)和宽度: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>
© www.soinside.com 2019 - 2024. All rights reserved.