Question

我正在尝试创建一个滚动效果，最好不使用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;
}

如果图像是身体的背景，我可以看到它是如何工作的，但是因为它位于身体的顶部，我有什么方法可以操纵它以产生类似的视觉效果？

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 个答案: