最近看到许多网页运用了一个效果，网页往下翻背景跟着屏幕滚轮的滚动而滚动。这让我很好奇是什么技术做出来的效果，正巧这两天浏览了守望先锋的官网，里面黑百合的造型结合多拉多的背景效果很帅，于是研究了一番。
实际效果
模块出现的时候是这样的：
初始位置
滑动滚轮，使页面往下拉：
下拉后的位置
由此可见，背景图的建筑物本来可以看见多层，随着页面下拉只看得到顶部了！
这就形成了一种很炫的视觉效果。
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
有的朋友说这个属性早就有了，到现在我才发现有这么一个属性呢！所以说要查漏补缺嘛，旧的技术结合好的想法也会有新的效果出现的。
网友评论