html - 具有不同 z-index 的同一 css 类中的多个背景图像

Question

我可能完全错了。我正在使用从图形艺术家设计的 .PSD 文件中切片的图像创建网站。简而言之，背景图像由 4 个 45 度 Angular 的绿色条和 3 个 315 度 Angular 的蓝色条轻微交织而成，因此它们在边缘交叉。

画出如下图案，边缘重叠

/ z-index: 0
\ z-index: 1
/ z-index: 0
\ z-index: 1
/ z-index: 0
\ z-index: 1
/ z-index: 0

我需要四个条显示在其他三个条的下方。最终目标是为这些条设置动画，以便在您向上或向下滚动页面时它们会升高或降低。所以我需要每个栏都是一个单独的元素、div 或任何它需要的东西，而不是一个扁平化的图像。问题是当你有多个背景图像时你不能使用 z-index，z-index 只适用于单独的每个元素。如果每个背景图像都有一个单独的 div，我可以分配一个 z-index。

每张图片的宽度约为 1284 像素，高度约为 769 像素。我不反对将每个背景图像放在自己的 div 中。但是当我这样做时，它似乎不起作用。我可以有多个 div，每个 div 都有自己的背景图片吗？当我在下面的 css 类中包含一个 z-index 时，我无法为每个背景图像分配一个 z 值。否则，如果我可以为下面的类中的每个背景图像分配一个 z-index，我的代码就可以实现我想要实现的目标。

<code>
<div class="stripes">

</div>

.stripes {
    position: relative;
    background-image: url(/images/GreenOne_49_01.png),
                      url(/images/BlueOne_49_02.png),
                      url(/images/GreenTwo_49_03.png),
                      url(/images/BlueTwo_49_03.png),
                      url(/images/GreenThree_49_04.png),
                      url(/images/BlueThree_49_05.png),
                      url(/images/GreenFour_49_05.png);
    background-position: 0px 0px,
                         0px 690px,
                         0px 690px,
                         0px 1378px,
                         0px 1384px,
                         0px 2075px,
                         0px 2076px;
    background-repeat: no-repeat;

    width: 100%;
    height: 100%;  

}
<code>

Answer 1

正如 Morklympious 所提到的，您需要使用 javascript 来更改代码中元素的类/id。完成后，您可以将 css 的新类/id 修改为您想要的背景/颜色。

观察用户向下滚动时这些元素如何进入 View :http://www.htmlpanda.com/skills-meter.php

http://www.w3schools.com/jsref/dom_obj_all.asp