鉴于访客屏幕大小不一,所以一般会将网页的背景图尽量做大开始应大屏幕的浏览效果。但是,这也导致小屏浏览的时候因为无法显示整张图片而导致页面浏览体验变差。
这时候,使用css控制网页背景图随浏览器的宽度而实现自适应,并且将背景图进行等比例缩放,即可实现想要的效果。
background-size: cover; //IE9以上 -webkit-background-size: cover; //webkit适用 -moz-background-size: cover; //Firefox -o-background-size: cover; //Opera
将以上代码追加到定义页面背景的css类里面即可。