使用不是背景的圖像創建類視差效果

我試圖創建一個最好不使用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

使用不是背景的圖像創建類視差效果

回答

相關問題