html - 主背景图像已修复，主 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;
}