精灵技术产生的背景

图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

我们在开发前端页面应用的时候，常常要用到一些小图标，比如首页、上传、位置、电话、分享，购物车等各式各样的图标。如果每个图标都发送一次http请求的话，这会较大的影响前端性能。通常会将所有图标整合到一起，只占用一个http请求。整合的方式有CSS sprite和iconfont。

CSS sprite的原理其实很简单，就是把所有用到的图标拼接到同一张png图片里，给图标元素设置背景图片，并通过CSS调整元素的background-position属性，使同一张背景图的不同部位在不同的元素中展现。要注意的是，元素的background-size设置的值应该和元素的大小成一定的倍数关系。比如设置了图标元素的宽高是40px，而png里每个图标的大小是80*80，这时候background-size应该是"50% auto"。为什么我们在合并图标的时候要做大一点呢？因为在手机上用，而手机通常是2倍屏、2.5倍屏，甚至3倍屏，按照一定的比例做大一点，这样在手机上用才不会发虚。