在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; 
} 

感谢