CSS background-attachment 属性

最近看到许多网页运用了一个效果，网页往下翻背景跟着屏幕滚轮的滚动而滚动。这让我很好奇是什么技术做出来的效果，正巧这两天浏览了守望先锋的官网，里面黑百合的造型结合多拉多的背景效果很帅，于是研究了一番。

实际效果

模块出现的时候是这样的：

初始位置

滑动滚轮，使页面往下拉：

下拉后的位置

由此可见，背景图的建筑物本来可以看见多层，随着页面下拉只看得到顶部了！
这就形成了一种很炫的视觉效果。

background-attachment

就是这个属性啦~（background-attachment）

浏览器支持

几乎所有的浏览器都支持此属性。

浏览器支持

定义及其用法

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。 属性值

写法

不太明白的同学可以拿一张长图试一下，设置容器高度低于图片背景高度就明白了。

body 
  { 
  background-image: url(bgimage.gif); 
  background-attachment: fixed;
  }

例子

W3C：http://www.w3school.com.cn/tiy/t.asp?f=csse_background-attachment

有的朋友说这个属性早就有了，到现在我才发现有这么一个属性呢！所以说要查漏补缺嘛，旧的技术结合好的想法也会有新的效果出现的。