background-size之CSS Sprite巧用

前言
background-size：规定背景图片的尺寸。为CSS3属性。so...万恶的ie浏览器，此刻的内心一定是崩溃的！说实话，作为一个前端的coder，面对CSS3如此多的炫酷效果，我不能用起来，还要求我兼容ie8及以下，我一定放弃维护多年的淑女形象，拿起刀！！！干什么，你懂的！当然，我大天朝的XX网站以及领导的审美除外！毕竟，我还是一朵需要祖国的阳光沐浴而茁长成长的老花朵！言归正传，聊一聊今天的主题。

background-size

CSS3属性。用法主要有下面4种。

length
设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
percentage
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

CSS Sprite

CSS Sprites又作css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，减少单张图片资源请求次数，以优化渲染性能。

本媛在coder的过程中有极强的完美主义倾向以及近乎苛刻的强迫症。见不得代码资源零碎和松散。所以，喜欢把一些描述性的图片资源进行整合。当然雪碧图就为首选。制作雪碧图的方法有很多。早年间最喜欢用ps。现在嘛，出现了很多优秀的制作工具。所以，打着时间是用来干更有意义的事的旗号一本正经的偷起了懒。所以，关于怎么制作一张雪碧图，在这里就不赘述。随便一家搜索引擎随便一搜都是一大票的解决方案。

CSS Sprite 应用
雪碧图其实就是把网页中一些图标以及零散的描述性图片整合到一张图片文件中，利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
如，有一张如下的雪碧图：

对应的CSS代码为：

i.pic{

  background: url('../../../static/dragComponentSprite.png') -15px -63px no-repeat;

  background-size: cover;

}

i.form{

  background: url('../../../static/dragComponentSprite.png') -64px -63px no-repeat;

  background-size: cover;

}

i.btn{

  background: url('../../../static/dragComponentSprite.png') -159px -63px no-repeat;

  background-size: cover;

}

i.map{

  background: url('../../../static/dragComponentSprite.png') -111px -63px no-repeat;

  background-size: cover;

}

那么问题来了......
一般在雪碧图中的单个小图都是一定大小的，与在网页应用中的目标大小并不一致。比如在雪碧图中单个图标的大小是50 * 50，而目标大小是35 * 35，这个时候按照单图来设置background-size:cover实际并不能如你所愿正确定位。

这是为什么呢？而这时候又该如何解决呢？难道如此美妙的雪碧图和酷炫的CSS3不能兼得？！O My God Orz.......这简直太绝望了有木有？

也许你会说，放弃雪碧图，依然用小图就可以啦。当然可以。但遇到困难就逃避不是本媛的性格！so，这种情况下，就跳出以往单图设置的框框。之所以出现这种状况应该是因为雪碧图和目标图的大小比例出现了问题。所以试想将雪碧图按照一定的比例进行变化，然后在去利用background-position设置定位是不是就可以解决了呢？那事实证明，这是可行的。

具体怎么做呢？
你可能忘了，CSS3中的background-size的作用。它生来就是用来设置背景图片的大小的。所以，我们依然用它来解决上面雪碧图应用中出现的问题。但是具体background-size要设置多大才合适呢。在这本媛就要传授一个小诀窍给你啦。

敲黑板，划重点啦！请牢牢记住下面万能的公式！！！

background-size 的宽度值 = (雪碧图总宽度 * 目标图像宽度) /雪碧图中高分辨率图像宽度

比如，我们上面的问题。
我制作的雪碧图中的图标是高分辨率下的50px * 50px；
网页中需要展示的目标图标是35px * 35px；
制作的雪碧图的总宽度是300px；
根据上面的公式 background-size 的宽度值 = (300 * 35)/50 = 210;
或许你已经注意到了，这里我只计算了背景图像的宽度值，并没有设置高度，这里就涉及到了background-size在响应式等比例缩放图片的应用了。这里暂不展开，下次可以单开一篇章好好聊聊。所以，为了确保背景图像缩放比例正常，我们将“height”值设置为“auto”。到这里。问题已经得到了完美解决。

最终的CSS代码为：

i.pic{

  background: url('../../../static/dragComponentSprite.png') -15px -63px no-repeat;

  background-size: 210px auto;

}

i.form{

  background: url('../../../static/dragComponentSprite.png') -64px -63px no-repeat;

  background-size: 210px auto;

}

i.btn{

  background: url('../../../static/dragComponentSprite.png') -159px -63px no-repeat;

  background-size: 210px auto;

}

i.map{

  background: url('../../../static/dragComponentSprite.png') -111px -63px no-repeat;

  background-size: 210px auto;

}

作者：离不开大海的鱼
链接：https://www.jianshu.com/p/a5bb445f3f43
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。