CSS3设定背景图的大小

在CSS 3出现之前，背景图片的大小是由图片实际尺寸决定的。这给开发带来了很多麻烦。CSS 3出现后，开发者可以使用background-size属性来规定背景图片的尺寸，这就可以在不同的环境中重复使用背景图片了。

使用background-size: 100% auto; 等效于使用background-size: contain;
使用background-size: auto 100%; 等效于使用background-size: cover;

1、设置一个高度和宽度均为300像素的容器，然后将一张1366*768的图片设置为背景：
//CSS如下

.container{
     background:url(bk.jpg) no-repeat;
     border: 2px solid black;
     margin:auto;
     width:300px;
     height:300px;
 }

//HTML如下

<div class="container"></div>

执行结果如下：

2、添加background-size属性：
//CSS如下

.container{
     background:url(bk.jpg) no-repeat;
     background:url(bk.jpg) no-repeat;
      background-size: 100% auto;    /*设置宽度100%，高度自动*/
      -webkit-background-size: 100% auto;
      border: 2px solid black;
      margin:auto;
      width:300px;
      height:300px;
 }

执行结果如下：

3、修改background-size属性，让高度填充满：

.container{
     background:url(bk.jpg) no-repeat;
     background:url(bk.jpg) no-repeat;
      background-size: auto 100%;    /*设置高度100%，宽度自动*/
      -webkit-background-size: auto 100%;
      border: 2px solid black;
      margin:auto;
      width:300px;
      height:300px;
 }

执行结果如下：

4、修改background-size属性，让图片完整显示，2中的高度虽填满，但图片宽度显示不完整，修改css宽度和高度都100%：

.container{
     background:url(bk.jpg) no-repeat;
     background:url(bk.jpg) no-repeat;
      background-size: 100% 100%;    /*设置高度100%，宽度100%*/
      -webkit-background-size: 100% 100%;
      border: 2px solid black;
      margin:auto;
      width:300px;
      height:300px;
 }

执行结果如下：