使用非背景圖像創建類似視差的效果

Question

我正在嘗試創建一種滾動效果，最好不要使用javascript（僅CSS），但是我知道是否不可能，只是探索各種選項。

我的頁面如下所示： 在此處輸入圖片說明

向下滾動時，我希望背景圖像具有類似於視差的效果，並在人體的背景和框架圍繞其移動時保持靜止。

以下是可使用的代碼示例：

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

如果圖像是人體的背景，我可以看到它如何工作，但是由於它位於人體的頂部，有什么方法可以操縱它以產生類似的視覺效果？

Answer 1

將您的.image-bg類更改為：

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

這樣可以防止圖像滾動

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

使用非背景圖像創建類似視差的效果

問題描述

1 個解決方案

解決方案1
3 已采納 2014-02-17 22:05:41

使用非背景圖像創建類似視差的效果

問題描述

1 個解決方案

解決方案1 3 已采納 2014-02-17 22:05:41

解決方案1
3 已采納 2014-02-17 22:05:41