使用非背景图像创建类似视差的效果

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