使用不是背景的图像创建类视差效果

我试图创建一个最好不使用javascript（仅限CSS）的滚动效果，但是我明白如果它不可能，只是探索选项。使用不是背景的图像创建类视差效果

我的页面看起来是这样的： enter image description here

当向下滚动我想要的背景图像具有视差般的效果，保持静态的，而它周围的人体的背景和框架的举动。

这里的代码样本一起工作：

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; 
}

我可以看到，如果图像是这会工作身体的背景，但是因为它坐在身体的顶部任何方式我可以操纵它有类似的视觉效果？

来源

2014-02-17 Jascination

改变你的图像配-BG类：

.image-bg{ 
    background:url('http://i.imgur.com/7cM1oL6.jpg') fixed; 
    height:400px; 
     background-size:cover; 
}

这将防止滚动

更新小提琴图像：http://jsfiddle.net/J8fFa/9/

来源

2014-02-17 22:05:41 Eeji

使用不是背景的图像创建类视差效果

回答

相关问题