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