css sprite | 易学教程

　　雪碧图是优化网站性能的一个重要手段；　　

　　开发中，我们常常遇到这样的问题：一大堆的小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

标签

css

小图标