雪碧图/精灵图使用教程(CSS Sprites)

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

2.例如(这样的小图标)

雪碧图/精灵图使用教程(CSS Sprites)

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

4.流程

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

雪碧图/精灵图使用教程(CSS Sprites)

位置在这里得到

雪碧图/精灵图使用教程(CSS Sprites)

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