|
很多人会问到怎么让网页的背景图片自适应屏幕高宽度，因为很多时候如果网页背景图片没有设置自适应的话，在不同分辨率的屏幕上显示的背景会有所不同，分辨率小的时候显示不全，分辨率大的时候又会留有空白，我又不想用小图片平铺满屏幕，那么该如何解决这个棘手的问题？当然用css的background-size就可以了，既简单又实用。用法举例：
body{
background:url(http://www.wd1x.com/images/logo.gif) no-repeat;
background-size:100% 100%;
}
background-size的取值用法，100% 100%表示宽和高无论多少分辨率都占满屏幕，但这样有时候背景图片就会出现高宽比例不协调，那么我们可以只设置宽度，让高度自适应宽度，只要把高度值去掉就行了，如：background-size:100%;除了使用%，还可以使用固定值，固定背景图片大小，让背景图片高宽都居中显示，如：
body{
background:url(http://www.wd1x.com/images/logo.gif) no-repeat center;
background-size:100px 100px;
}
不给个演示又说我骗大家~
b<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.hbcwwdjod{height:500px;background:url(http://www.wd1x.com/images/logo.gif) no-repeat;ackground-size: 100%;}
.hbcwwdjod2{height:500px;background:url(http://www.wd1x.com/images/logo.gif) no-repeat center;background-size: 500px 300px; }
</style>
<div class="hbcwwdjod"><p align="center">这是模块1：background-size: 100%;</div>
<div class="hbcwwdjod2"><p align="center" style="padding-top:100px;">这是模块2：background-size: 500px 300px;</div>
注意：ie8及ie8以下的浏览器版本不支持，如果你还在用ie8，你该升级了~
|
