我有一个页面，其中有两个部分堆叠在一起。上部分具有固定位置的背景图像以创建视差效果。因为滚动时我遇到了大量的性能问题，所以我必须更改布局。优化具有视差效果的滚动性能

从这：

.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;，我会遇到与以前相同的性能问题。任何想法如何解决这个问题？

更新1

为了将来所有的读者：我的下段的背景设置为白色固定我的问题：

.lower-section { 
    height: 100vh; 
    background: white; 
}

来源

2017-08-05 xvzwx

看起来在这里很好。 https://jsfiddle.net/MrLister/1ue288dg/1/你能指向一个页面哪里出错了吗？ –

背景图片应该只包含上面的部分。下半部分应该没有背景图像。像这样：https：//jsfiddle.net/hn93sqqh/ – xvzwx

如果下面的部分没有背景，那么你看透了它。 https://jsfiddle.net/1ue288dg/2/ –

从你的尝试和建议@MrLister给出一个答案问题：

正如前面评论和丢失的评论流程中，你错过了一个背景.lower-section隐藏前一个（s）。

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>

来源

2017-08-05 13:07:35

优化具有视差效果的滚动性能

更新1

回答

相关问题