雪碧图／精灵图使用教程（CSS Sprites）

1.对于网页中的一些小的icon，我们可以通过字体图标来展示，但有些特殊的小图标是自己公司的设计小姐姐制作的，我们就需要使用这些小图标，但如果每个小图标都当做一个图片，就会每次都请求一遍，一去一回（向发送请求和接收到请求）每张图片都需要这个时间，如果将一些小的图标组装成一个图片，则只需要向服务器发送一次请求，只会消耗一次的时长，减小链接时长的消耗；

2.例如（这样的小图标）

3.当然了，这种体力活需要借助工具的，不然一个一个搞，太累。

4.流程

打开https://www.toptal.com/developers/css/sprite-generator

位置在这里得到

5.说明：建议在生成雪碧图之前，组好将每个小图片icon设置为需要的大小；