我遇到了一个问题——实际上我想做一些类似于蒙版视差滚动区域的东西。
也许这里就是一个很好的例子 http://davidwalsh.name/parallax 如果您向下滚动一点,就会看到带有一些视差元素的 iframe。
我想要一个带有 background-attachment:fixed;
的 main div,以及一个固定在 main 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;
}
感谢帮助
最佳答案
过了一会儿我明白了你的要求: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;
}
关于html - 主背景图像已修复,主 div 内的 div 背景图像也已修复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26597228/