当background-size遇见装逼利器transition

事先声明：如果你在使用IE10-版本的浏览器，同时又想想流畅观看本文，麻烦请升级或更换你的浏览器！推荐chrom或者Firefox。老规矩~美女镇楼！先看妹子加速血液循环，有利于学习记忆和理解！！！

当background-size遇见装逼利器transition

在css3以前网站制作者想要设置一个背景图片，只能通过控制图片的大小来适应DOM容器元素的大小，稍微有些偏差背景图片的效果就会大打折扣。css3开启了一个视觉化的时代，现在我们可以利用background-size属性来使我们的图片不必“委身”与DOM容器的限制。

CSS1.0和CSS2.0时代,如果我们想给我们的按钮设置的背景图片不是太符合按钮的尺寸，可能会出现类似下面的情况(为了突出效果，刻意使用大得多的图来夸张表现)：

当然了，我们可以通过background-position来移动背景图片的位置。就好下面的按钮一样！

这样的操纵并不能很好的去解决背景图片显示尺寸的问题，最终还是需要去修改图片的尺寸来配合DOM元素的限制。可是background-size的出现改变了这种“尴尬”的局面。我们变得可以随意的控制背景图片的大小了。

image.png

关于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为相适应的数值或者百分比值。

(报告完毕！)