在div內垂直滾動多個背景圖像以及文字

Question

我該如何去創建這種垂直滾動的最不直接的方式？我認爲我計劃這一切都是錯誤的。

我現在有與background-image一個div，並且（1）/（2）/等具有負的定位和比div，固定在頂部更高z-index。

我的想法是爲每個段落創建一個JS偵聽器，並在觸發時更改背景圖像。但是這不會幫助我將它捲起來，所以我想我會以錯誤的方式去做。

理想情況下，我希望圖像以與段落相同的方式滾動，以便它看起來很「自然」。但是，將多個div放在一起放置蒙版，並將顯示器打開：關閉似乎有點太瘋狂了。

Answer 1

所以一個方式，我認爲可以這樣做：

你基本上要創建一個窗口，你看到...

背景圖像，以便創建一個z-index的東西固定元素像10，然後你的圖像在z-index爲1，所以他們在窗戶後面。然後將文本的z-index設置爲20，這樣它就可以在所有內容之上。

這是一個非常基本的片斷：

https://codepen.io/anon/pen/LzQrYa

代碼：

<div class="container"> 

    <div class="cover top"></div> 
    <div class="cover right"></div> 
    <div class="cover bottom"></div> 
    <div class="cover left"></div> 
    <div class="bg-image one"></div> 
    <div class="bg-image two"></div> 
    <div class="bg-image three"></div> 

    <p class="text one">Text 1</p> 
    <p class="text two">Text 1</p> 
    <p class="text three">Text 1</p> 
</div> 

CSS：

.container { 
    position: relative; 
    display: inline-block; 
    width: 100%; 
    float: left; 
} 
.container .cover { 
    position: fixed; 
    display: inline-block; 
    background-color: #ffffff; 
    z-index: 10; 
} 
.container .cover.top { 
    top: 0; left: 0; 
    width: 100%; 
    height: 120px; 
} 
.container .cover.right { 
    top: 0; right: 0; 
    width: 100px; 
    height: 100%; 
} 
.container .cover.bottom { 
    bottom: 0; left: 0; 
    width: 100%; 
    height: 120px; 
} 
.container .cover.left { 
    top: 0; left: 0; 
    width: 500px; 
    height: 100%; 
} 
.container .bg-image { 
    position: relative; 
    display: inline-block; 
    width: 100%; 
    height: 400px; 
    float: left; 
} 
.container .bg-image.one { background-color: #cccccc; } 
.container .bg-image.two { background-color: #8ec640; } 
.container .bg-image.three { background-color: #ff00ff; } 

.container .text { 
    position: absolute; 
    display: inline-block; 
    font-size: 40px; 
    color: #000000; 
    z-index: 20; 
} 
.container .text.one { 
    top: 40px; 
    left: 50px; 
} 
.container .text.two { 
    top: 500px; 
    left: 50px; 
} 
.container .text.three { 
    top: 940px; 
    left: 50px; 
} 

感謝