李东的技术博客

文章内容Content

当background-size遇见装逼利器transition

2016/10/11 422 ℃ 抢个沙发

by LiDong from https://www.lidongtech.com/background-size-and-transition.html
本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处。如果只是引流,请随意~

事先声明:如果你在使用IE10-版本的浏览器,同时又想想流畅观看本文,麻烦请升级或更换你的浏览器!推荐chrom或者Firefox。

老规矩~美女镇楼!先看妹子加速血液循环,有利于学习记忆和理解!!!

当background-size遇见装逼利器transition

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

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

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

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

关于background-size的具体用法,请自行百度,本文不再涉及~(犯懒不想复制黏贴了,反正满大街都是。)当background-size遇见装逼利器transition,那种效果简直不忍直视,哦~不对是眼前一亮。

在开始装逼之前,插上一句:有关transition的总结,请出口左转浏览我以前的文章《CSS入门级装逼利器transition

先看效果后上代码,鼠标滑过下图感受下效果:

嘿嘿~~~比呆呆的一张图的效果要看起来好多了吧,来访代码看看:

这种效果可以运用到很多地方,让呆呆图片变的有趣生动。其实还可以使用imgtransform:scale();来实现这种效果,不过需要多嵌套一层父级标签,并且要在父级标签设置overflow:hidden属性,缺点是图片展示出来是全部。所以我喜欢这种简洁的利用background-size控制背景图像的大小,显示部分图片符合国人“油爆琵芭半遮面”的审美,再利用transition让这种变化以“过渡”呈现而非“硬性转换”,瞬间感觉“碉堡”了,要上天的节奏。tips:两种方法没有优劣之分,只看具体应用环境更适合谁来。

我们都知道background-size有两个特殊的“关键字”值,分别是cover/contain。 关于它们的作用我复制了一份表格,这样看的更清晰一些。

background-size语法
background-size: length|percentage|cover|contain;

background-size值说明
描述
length 设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 “auto”。

percentage 以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 “auto”。

cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

 

最后重点强调下,有些版本的浏览器可能会出现利用transition属性过渡background-size:coverbackground-size:具体值的情况可能会出现transition失效的情况,这时候就需要修改background-size:cover为相适应的数值或者百分比值。

(报告完毕!)
本文标签:标签:, , , , ,