CSS3 background-size控制背景图尺寸

background-size这个属性其实是在做响应式布局的时候用到了的。

当时目的是要让背景div按照比例缩放来适应各种浏览器的尺寸，可是背景图是一张大图，这样就需要背景图片铺满整个div。

下面简单说一下background-size这个属性的用法吧。

#####语法

background-size ：[ <length>

auto ]{1,2}

cover

contain

#####兼容性

类型	Internet Explorer	Firefox	Chrome	Opera	Safari
版本	(×)IE6	(×)Firefox 2.0	(√)Chrome 1.0.x	(√)Opera 9.63	(√)Safari 3.1
	(×)IE7	(×)Firefox 3.0	(√)Chrome 2.0.x		(√)Safari 4
	(×)IE8	(×)Firefox 3.5
	(√)IE9	(√)Firefox 3.6

#####代码与实例

数值表示背景图尺寸

#test-background-size-one {
    background-size: 300px 80px;
}

百分比表示背景尺寸

#test-background-size-two {
    background-size: 25% 75%;
}

百分比数值混合使用表示背景尺寸

#test-background-size-three {
    background-size: 200px 75%;
}

等比扩展图片来填满元素

#test-background-size-four {
    background-size: cover;
}

等比缩小图片来适应元素的尺寸

#test-background-size-five {
    background-size: contain;
}

以图片自身大小来填充元素

#test-background-size-six {
    background-size: auto;
}

用于设置背景图片的大小，有2个可选值，第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只指定1个值得，则第2个值默认为auto