我正在尝试实现纯CSS视差效果,而无需固定背景高度。这在一些 地方已有描述,但它们共同的限制是必须知道背景层的固定高度。
由于某些动态内容,我希望在没有固定背景高度的情况下实现此效果。
我的最小示例在这里:https://jsfiddle.net/yf8oyben/
现在它能够工作,但是假设背景是250px,就像CSS中所注释的那样。是否可能去掉这个限制,仍然保留当前的效果?
由于某些动态内容,我希望在没有固定背景高度的情况下实现此效果。
我的最小示例在这里:https://jsfiddle.net/yf8oyben/
#container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
perspective: 1px;
overflow-x: hidden;
overflow-y: scroll;
}
.background {
transform: translateZ(-1px) scale(2);
width: 100%;
background: lightgreen;
height: 250px; /* Assumes bg height */
position: absolute; /* Assumes bg height */
top: calc(125px - 50vh); /* Assumes bg height */
}
.foreground {
background: rgba(0, 0, 255, 0.5);
width: 100%;
position: absolute; /* Assumes bg height */
top: 250px; /* Assumes bg height */
}
<body>
<div id='container'>
<div id="group1">
<div class="background">
<div style="height: 10rem"></div>
<center>Banner</center>
<div style="height: 10rem"></div>
</div>
<div class="foreground">
<div style="height: 10rem"></div>
<center>Content</center>
<div style="height: 100rem"></div>
</div>
</div>
</div>
</body>