我正在尝试创建一个最好不使用 javascript(仅限 CSS)的滚动效果，但我知道如果这不可能，只是探索选项。
我的页面如下所示:
当向下滚动时，我希望背景图像具有类似视差的效果，在 body 的背景和框架围绕它移动时保持静止。
下面是一个代码示例:
HTML
<body>
<div class="border-bg">
<div class="image-bg"></div>
</div>
<div class="border-bg">
<div class="spacer">
</div>
</div>
</body>
CSS
body{
background-color:#aaa;
}
.border-bg{
width:80%;
margin:30px auto;
background-color:#fff;
padding:40px;
}
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg');
height:400px;
background-size:cover;
}
.spacer{
height:900px;
}
如果图像是 body 的背景，我可以看到它是如何工作的，但是由于它位于 body 的顶部，有什么方法可以操纵它以获得类似的视觉效果吗？
最佳答案
将您的 .image-bg 类更改为:
.image-bg{
background:url('http://i.imgur.com/7cM1oL6.jpg') fixed;
height:400px;
background-size:cover;
}
这将防止图像滚动
更新的 fiddle :http://jsfiddle.net/J8fFa/9/
关于javascript - 使用不是背景的图像创建类似视差的效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21840102/