修复了主背景图，修复了主 div 中的 div 的背景图

Question

我遇到了一个问题——实际上我想制作一个类似于蒙版视差滚动区域的东西。

也许一个很好的例子就是这里http://davidwalsh.name/parallax 如果您向下滚动一点，则会出现一个带有一些视差元素的 iframe。

我想要一个带有background-attachment:fixed; 的ma​​in div，以及一个在 ma​​in div 内的 div，它的部分也有一个固定的背景，我想要滚动整个图像，向下滚动时不仅显示部分背景图像

虽然它应该通过将 background-attachment:fixed; 添加到类 .bg-fix 来工作，如下所示： http://jsfiddle.net/cuginoCoso/k5zk5m9q/2/

HTML

<div id="img-strip">
<div class="bg-fix slide-img"></div>
<div class="bg-fix slide-img"></div>
<div class="bg-fix slide-img"></div>
<div class="bg-fix slide-img"></div>
</div>

CSS

.bg-fix {
    background-attachment: fixed;
}
#img-strip {
    border: 1px solid #ffff00;
    height: 200px;
    width: 200px;
    overflow: scroll;
    z-index: 30;
}
.slide-img {
    height: 300px;
    width: 300px;
    display: block;
}

.slide-img:nth-child(even) {
    background-image:  url(https://www.webkit.org/blog-files/acid3-100.png);
    background-color: red;
}
.slide-img:nth-child(odd) {
    background-image:  url(http://drublic.de/blog/wp-content/uploads/2011/10/rotate-images.jpg);
    background-color: blue;
    margin: 0;
}

感谢您的帮助

Answer 1

过了一会儿我明白了你的要求：P 这是它的独奏：http://jsfiddle.net/k5zk5m9q/5/

/* Remove this line below from your CSS */
.bg-fix {background-attachment: fixed;}

/* Add background-attachment: fixed; to .slide-img:nth-child(odd) */
.slide-img:nth-child(odd) {
    background-attachment: fixed;
    background-image:  url(http://drublic.de/blog/wp-content/uploads/2011/10/rotate-images.jpg);
    background-color: blue;
    margin: 0;
}