« 上一篇下一篇 »

实用的CSS实现背景图自适应屏幕分辨率宽高

CSS实现背景图自适应屏幕分辨率宽高
作者:秋叶 发表时间:2015年2月06日
很多人会问到怎么让网页的背景图片自适应屏幕高宽度,因为很多时候如果网页背景图片没有设置自适应的话,在不同分辨率的屏幕上显示的背景会有所不同,分辨率小的时候显示不全,分辨率大的时候又会留有空白,我又不想用小图片平铺满屏幕,那么该如何解决这个棘手的问题?当然用css的background-size就可以了,既简单又实用。用法举例:

body{
background:url(http://www.cnkingjoy.com/AD/kingjoy_11-11_3.jpg) no-repeat;
background-size:100% 100%;
}
background-size的取值用法,100% 100%表示宽和高无论多少分辨率都占满屏幕,但这样有时候背景图片就会出现高宽比例不协调,那么我们可以只设置宽度,让高度自适应宽度,只要把高度值去掉就行了,如:background-size:100%;除了使用%,还可以使用固定值,固定背景图片大小,让背景图片高宽都居中显示,如:

body{
background:url(http://www.cnkingjoy.com/AD/kingjoy_11-11_3.jpg) no-repeat center;
background-size:100px 100px;
}


来源:网络