测试图片 1:
测试图片 2:
background-size
【200 x 200】默认
【200 x 200】默认
【200 x 200】background-size:200px 100px;
【200 x 200】background-size:200px 100px;
background-repeat: no-repeat;
【200 x 200】background-size:200px 100px;
background-repeat: no-repeat;
background-position: right 50px bottom 50px;
【200 x 200】
background-position: 50% 50%;
【200 x 200】
background-size:cover;
【200 x 200】
background-size:auto;
【200 x 200】
background-size:contain;
background-repeat: no-repeat;
可以设置图片居中，并且自适应显示:
【200 x 200】
background-size:contain;
background-repeat: no-repeat;
background-position: 50% 50%;
比如一个容器 (body,div,span) 中设定一个背景。这个背景的长宽值在 css2.1 之前是不能被修改的。
所以实际的结果是只能重复显示，所以出现了 repeat,repeat-x,repeat-y,no-repeat 这些属性。就是用来
控制背景图片的显示的。所以一般用作背景图片的有 2 类：
- 是一整张大图，尺寸和区域大小刚好吻合
2. 一个很小的条状图，通过 repeat 后，形成一个很规则的大图背景。
但是 css3 出现以后，这个情况被改善了。background-size 属性可以让我们之前的希望成真。
而且这个属性在 firefox，chrome，以及 ie9 上都可以使用。
具体使用方法如下：
背景图尺寸 (数值表示方式)：
#background-size{
background-size:200px 100px;
}
背景图尺寸 (百分比表示方式)：
#background-size2{
background-size:30% 60%;
} 背景图尺寸 (等比扩展图片来填满元素，即 cover 值)：
#background-size3{
background-size:cover;
} 背景图尺寸 (等比缩小图片来适应元素的尺寸，即 contain 值)：
#background-size4{
background-size:contain;
} 背景图尺寸 (以图片自身大小来填充元素，即 auto 值)：
#background-size5{
background-size:auto;
}