滚动效果与背景图像修复

Question

我遇到了一些副作用。虽然访问了一些网站，但我发现了这种滚动效果。 here is the link

基本上实际上它是什么。我试图修复背景图像，当我滚动页面时，我的背景图像仍然向上移动。请帮助我。我尝试过各种教程。但是我无法得到任何东西。我想要滚动效果就像上面的链接一样。有一个小条带继续移动但背景图像是固定的。请帮帮我。

here is the link of fiddle

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操纵多个图像来创建视差效果。要开始使用，请参阅Parallax effect tutorial，Some more parallax effect tutorials