javascript - 滚动效果与背景图像修复

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 设置图像位置。