Question

我遇到了问题 - 实际上我想制作一个像蒙面视差滚动区域的东西。

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

我想要一个带有background-attachment:fixed;的主要div ，以及主要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;
}

固定主背景图像，并固定主div内的div背景图像

1 个答案: