CSS3:background-size的使用

控制背景图片的太小以前我们都是使用js去动态设定它的大小，然而css3给我们提供了background-size这个属性我们可以轻松的来控制背景图片的大小。还可以通过媒体查询来进行不同屏幕的适配。

####background-size

取值：

length(长度值) | percentage(百分比值) | auto | cover | contain 

以下demo是基于webkit内核制作

####1、length(长度值)

html code：

<div class="m-section">
	<div class="box"></div>
</div>

css code:

.m-section .box{
    background: url('url');
    -webkit-background-size: 113px 113px;
}

说明：这是我们常用的方法，设置size的固定值来控制背景大小，一般在移动端会奖图片的实际值/2来设置size，但是size的值不允许为负值。

查看demo请搓这里 进入

1、两个值都设置为100%:

css code:

.m-section .box{
    -webkit-background-size: 100% 100%;
}

当size的两个值都设值为100%时，背景图片会铺满整个容器可能导致图片变形。

2、一个值设置为100%:

css code:

.m-section .box{
    -webkit-background-size: 100%;
    /*-webkit-background-size: 100% auto*/
}

当size的第一个值都设值为100%时，则第二个值会默认的为auto，这时背景会以设定的size宽度来填充容器。

3、宽度设置为auto，高度100%:

css code:

.m-section .box{
    -webkit-background-size: auto 100%;
}

相反当size的第二个值都设值为100%时，第一个设置为auto，这时背景会以设定的size高度来填充容器。

查看demo请搓这里 进入

####3、cover

css code:

.m-section .box{
    -webkit-background-size: cover;
}

说明：背景图像会等比缩放到完全覆盖容器，但宽高可能会超出容器。

(1) 当图片的实际宽度大于实际高度时效果相当于w=auto h=100%。

(2) 当图片的实际宽度小于实际高度时效果相当于w=100% h=auto。

查看demo请搓这里 进入

####4、contain

css code:

.m-section .box{
    -webkit-background-size: contain;
}

说明：背景图像会等比缩放到覆盖容器，背景图片会全部显示在容器中，不会超出容器。

(1) 当图片的实际宽度大于实际高度时效果相当于w=100% h=auto。

(2) 当图片的实际宽度小于实际高度时效果相当于w=auto h=100%。

查看demo请搓这里 进入