我有一个页面，其中有两个部分相互堆叠。上半部分有一个固定位置的背景图像，以创建视差效果。因为我在滚动时遇到了巨大的性能问题，所以我不得不更改布局。
由此：
.upper-section {
height: 100vh;
background: url("./img/background.png") no-repeat fixed;
background-size: cover;
}
.lower-section {
height: 100vh;
...
}
对此：
.upper-section {
height: 100vh;
overflow: hidden; // added for pseudo-element
position: relative; // added for pseudo-element
&::before {
content: ' ';
display: block;
position: fixed; // instead of background-attachment
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("./img/background.png") no-repeat fixed;
background-size: cover;
will-change: transform; // creates a new paint layer
z-index: -1;
}
}
将背景放在它自己的容器中。我的问题是我的背景图像容器没有继承上部容器的高度并且也覆盖了下部。如果我更改position: fixed;为，position: absolute;我会遇到与以前相同的性能问题。知道如何解决这个问题吗？
致所有未来的读者：我通过将下半部分的背景设置为白色来解决我的问题：
.lower-section {
height: 100vh;
background: white;
}
根据您的尝试和@MrLister 的建议，回答这个问题：
正如之前评论的那样，在评论流中迷失了方向，你错过了.lower-section隐藏以前的背景。
html,
body {
margin: 0
}
.upper-section {
height: 100vh;
overflow: hidden;
position: relative;
}
.upper-section::before {
content: ' ';
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url("http://lorempixel.com/700/700") no-repeat fixed;
background-size: cover;
will-change: transform;
z-index: -1;
}
.lower-section {
height: 100vh;
background: white;
}<div class="upper-section">
Upper section
</div>
<div class="lower-section">
Lower section
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句