我有一個頁面，其中有兩個部分堆疊在一起。上部分具有固定位置的背景圖像以創建視差效果。因爲滾動時我遇到了大量的性能問題，所以我必須更改佈局。優化具有視差效果的滾動性能

從這：

.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

回答

相關問題