我正在尝试设置一个网站,我的目标是创建一个跟踪客户端视图端口的背景。因此,当客户端滚动浏览文本时,背景保持不变。
我以前在某个网站上的某个地方看到过这个,但想不起来。
我怎样才能做到这一点?
来了。例如,我只为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>