雪碧图/精灵图使用教程(CSS Sprites)
1.对于网页中的一些小的icon,我们可以通过字体图标来展示,但有些特殊的小图标是自己公司的设计小姐姐制作的,我们就需要使用这些小图标,但如果每个小图标都当做一个图片,就会每次都请求一遍,一去一回(向发送请求和接收到请求)每张图片都需要这个时间,如果将一些小的图标组装成一个图片,则只需要向服务器发送一次请求,只会消耗一次的时长,减小链接时长的消耗;
2.例如(这样的小图标)
3.当然了,这种体力活需要借助工具的,不然一个一个搞,太累。
4.流程
打开https://www.toptal.com/developers/css/sprite-generator
位置在这里得到
5.说明:建议在生成雪碧图之前,组好将每个小图片icon设置为需要的大小;