CSS实现背景图自适应屏幕分辨率宽高
作者：秋了秋 发表时间：2015年02月06日
很多人会问到怎么让网页的背景图片自适应屏幕高宽度，因为很多时候如果网页背景图片没有设置自适应的话，在不同分辨率的屏幕上显示的背景会有所不同，分辨率小的时候显示不全，分辨率大的时候又会留有空白，我又不想用小图片平铺满屏幕，那么该如何解决这个棘手的问题？当然用css的background-size就可以了，既简单又实用。用法举例：
body{ background:url(//img.netblog.site/alone.png) no-repeat; background-size:100% 100%; } background-size的取值用法，100% 100%表示宽和高无论多少分辨率都占满屏幕，但这样有时候背景图片就会出现高宽比例不协调，那么我们可以只设置宽度，让高度自适应宽度，只要把高度值去掉就行了，如：background-size:100%;除了使用%，还可以使用固定值，固定背景图片大小，让背景图片高宽都居中显示，如：
body{ background:url(//img.netblog.site/alone.png) no-repeat center; background-size:100px 100px; } 不给个演示又说我骗大家~
注意：ie8及ie8以下的浏览器版本不支持，如果你还在用ie8，你该升级了~
3
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/282.html