我正在纯css中创建视差效果，但我不知道如何使背景跨越最前面的列的整个大小。
理想情况下，我希望背景大约是前景列高度的120%，这样即使滚动到底部也总是有背景。有办法做到这一点吗？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax">
<div class="layer back background">
</div>
<div class="layer front">
<div class="spread-out">A wall of text taller than the screen</div>
<div class="spread-out">A wall of text taller than the screen</div>
<div class="spread-out">A wall of text taller than the screen</div>
</div>
</div>
</body>
</html>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
margin: 0;
}
.layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.back {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -5px;
transform: translateZ(-1px) scale(2);
z-index: -1;
}
.background {
background-image: linear-gradient(#FFFFFF, #333333);
}
.spread-out {
height: 50vh;
}
试试这个：
.parallax {
perspective: 1px;
height: 120vh;
overflow-x: hidden;
overflow-y: auto;
margin: 0;
}
将高度设置为120vh。
了解了如何使用网格来实现这一点，该网格可以相对于彼此而不是页面来调整子级的大小。无论前景框有多高，这都有效。
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.parallax {
perspective: 1px;
overflow-x: hidden;
overflow-y: auto;
margin: 0;
display: grid;
height: 100%;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas: "whole-grid";
}
.layer {
grid-area: whole-grid;
}
.base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.back {
content: " ";
transform: translateZ(-1px) scale(2);
z-index: -1;
}
.background {
background-image: linear-gradient(#FFFFFF, #000000, #FFFFFF);
}
.spread-out {
height: 50vh;
}