事先声明：如果你在使用IE10-版本的浏览器，同时又想想流畅观看本文，麻烦请升级或更换你的浏览器！推荐chrom或者Firefox。老规矩~美女镇楼！先看妹子加速血液循环，有利于学习记忆和理解！！！
在css3以前网站制作者想要设置一个背景图片，只能通过控制图片的大小来适应DOM容器元素的大小，稍微有些偏差背景图片的效果就会大打折扣。css3开启了一个视觉化的时代，现在我们可以利用background-size属性来使我们的图片不必“委身”与DOM容器的限制。
CSS1.0和CSS2.0时代,如果我们想给我们的按钮设置的背景图片不是太符合按钮的尺寸，可能会出现类似下面的情况(为了突出效果，刻意使用大得多的图来夸张表现)：
当然了，我们可以通过background-position来移动背景图片的位置。就好下面的按钮一样！
这样的操纵并不能很好的去解决背景图片显示尺寸的问题，最终还是需要去修改图片的尺寸来配合DOM元素的限制。可是background-size的出现改变了这种“尴尬”的局面。我们变得可以随意的控制背景图片的大小了。
关于background-size的具体用法，请自行百度，本文不再涉及(犯懒不想复制黏贴了，反正满大街都是。)当background-size遇见装逼利器transition，那种效果简直不忍直视，哦~不对是眼前一亮。
在开始装逼之前，插上一句：有关transition的总结，请出口左转浏览我以前的文章《CSS入门级装逼利器transition》
先看效果后上代码，鼠标滑过下图感受下效果：
嘿嘿~~~比呆呆的一张图的效果要看起来好多了吧，来访代码看看:
/*当background-size遇见装逼利器transition*/
#demo0{
width :300px;
height :400px;
background :transparent url("abc.jpg") no-repeat center;
-webkit-background-size : auto 100%;
background-size: auto 100%;
-webkit-transition:all .6s;
-moz-transition:all .6s;
-ms-transition:all .6s;
-o-transition:all .6s;
transition:all .6s;
cursor :pointer;
}
#demo0:hover{
-webkit-background-size : auto 120%;
background-size : auto 120%;
}
<div id="demo0"></div>
这种效果可以运用到很多地方，让呆呆图片变的有趣生动。其实还可以使用img和transform:scale();来实现这种效果，不过需要多嵌套一层父级标签，并且要在父级标签设置overflow:hidden属性，缺点是图片展示出来是全部。所以我喜欢这种简洁的利用background-size控制背景图像的大小，显示部分图片符合国人“油爆琵芭半遮面”的审美，再利用transition让这种变化以“过渡”呈现而非“硬性转换”，瞬间感觉“碉堡”了，要上天的节奏。tips：两种方法没有优劣之分，只看具体应用环境更适合谁来。
我们都知道background-size有两个特殊的“关键字”值，分别是cover/contain。 关于它们的作用我复制了一份表格，这样看的更清晰一些。
background-size语法
background-size: length|percentage|cover|contain;
| 值 | 描述 |
|---|---|
| length | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。 |
| percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。 |
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
最后重点强调下，有些版本的浏览器可能会出现利用transition属性过渡background-size:cover到background-size:具体值的情况可能会出现transition失效的情况，这时候就需要修改background-size:cover为相适应的数值或者百分比值。
