滚动效果和背景图片修复

Question

我迷上了视差效果。在访问某些网站时，我发现了这种滚动效果。 链接在这里

基本上是实际的。我尝试固定背景图像，但每次滚动页面时背景图像仍会向上移动。请帮助我。我尝试了各种教程。仍然无法获得任何内容。我只是想获得滚动效果就像上面的链接一样。有一个小条继续前进，但背景图像是固定的。请帮帮我。

这是小提琴的链接

的CSS

{

    height:200px;
    width:100%;
    background-image:url('http://upload.wikimedia.org/wikipedia/commons/1/1b/View_of_Santa_Maria_del_Fiore_in_Florence.jpg');

}
#div3
{
height:400px;
    width:100%;
        background-color:lime;
}

html

<div id="div1">this is my first div</div>
<div id="div2">this is my second div</div>
<div id="div3">this is my third div</div>

Answer 1

如果要固定背景图像，只需添加正确的属性。

将此添加到#div2

background-attachment: fixed;

这将根据页面的左上角而不是div来设置图像位置。

Answer 2

通过使用JavaScript和CSS处理多个图像来创建视差效果。 要开始使用，请参阅视差效果教程 ， 更多视差效果教程