雪碧图是优化网站性能的一个重要手段;
开发中,我们常常遇到这样的问题:一大堆的小icon图标,比如个性化的箭头、按钮等;当加载网页时,则要一个个地加载这些小图标,每一个小图标都需要http请求,这增加了网络延迟的可能;
假设把这些小图标都放到一张图片中,使用的时候直接获取图片对应位置上的图标,那么网页加载时只需要请求这一张图片,显然这种方式减少了http请求;
css sprite原理
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置
.sprite{ width: 23px; height: 23px; background-image: url('./images/sprite.png'); background-repeat: no-repeat; background-position: 28px 50px; //精确定位图片位置 }
制作雪碧图
如何制作css sprite呢? 目前主要有两种方式:
1.利用工具手动添加制作雪碧图,这种工具有很多,比如spritebox等;这种在制作完雪碧图后,还需要手写css指定不同的小图标;
2.使用sass,compass组合生成雪碧图;这种方式在生成雪碧图的同时,会生成css文件,直接从css文件中使用对应小图标的类即可,非常方便;
参考:(优质的文档能够准确,快速地理解掌握知识点;感谢以下文档)
[1] 使用compass生成雪碧图
来源:https://www.cnblogs.com/RocketV2/p/7227682.html