类似于百度首页的效果,当放大缩小网页的时候,背景图都不会发生变化:
首先要有一张分辨率超过几乎所有主流显示屏分辨率的大图,比如1920*1280dpi,将其设置成body的背景
然后将background-size属性设置成cover,background-attachment设置成fixed,核心代码:
background:url(images/wallpaper/sunflower.jpeg);
background-attachment:fixed;
background-size:cover;
-webkit-background-size: cover;
-o-background-size: cover;
为了兼容其它浏览器,可以考虑加上下面两句:
/* 兼容Webkit内核浏览器如Chrome和Safari */
-webkit-background-size: cover;
/* 兼容Opera */
-o-background-size: cover;
/* 兼容Firefox */
-moz-background-size: cover;