学习笔记|CSS Sprites(CSS图片精灵、雪碧图)看这里就够了前端|经验分享|css

CSS Sprites是什么 【学习笔记|CSS Sprites(CSS图片精灵、雪碧图)看这里就够了】CSS Sprites是一种网页图片应用处理方式。
又被解释为：

CSS精灵
CSS图像拼合
CSS贴图定位
CSS图片精灵
CSS雪碧图
图片合成技术

CSS Sprites的原理

就是把一个页面涉及到的所有零星图片（适合小的导航图标icon图片、按钮图标icon图片；不适合大的页面背景图片）等有规则的合并成一张大图中，即将多个图片融合到一张整图里面。
在需要用到图片的时候，通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。

CSS Sprites的优势

通过图片整合来减少对服务器的http请求次数，从而提高页面的加载速度，提高了页面性能。
通过整合图片来减小图片的数量和体积。
解决图片命名上的困扰。
更换页面风格比较方便（更换不同颜色/形状的icon整图）。

CSS Sprites的缺点

在开发时你要通过photoshop(PS)或其他工具测量计算每一个背景单元的精确位置。
在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，你需要考虑当前盒子会不会漏出其他的背景图，要留好只够的空间，防止板块内不会出现不必要的背景，如果留空间或拼合位置不合适，在布局时容易出现背景出现拼合相邻图片，干扰图片的情况。
维护比较麻烦，如果页面背景有少许改动（更换某个图标），一般就要改这张合并的图片。无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，最好在图片上增加图片不要删除原来的图片，这样图片的字节就增加了，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐，而且需要重新计算图片的位置。所以一旦需要更改背景图的话，轻易不要改变其他图片的位置，原位能放下就在原位改，放不下就在下面添加。
由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

CSS Sprites图片整合原则

边切图边整合，定位时避免使用bottom,right等，用具体的数值，为了避免当你的宽度或高度上扩展sprites图时出现位置的错误。
将小图标预留足够的空间，因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距，以至于其它的图片可能会意外出现在本区域内。一般的情况下，会将这些小图标整合到文件的最右侧。
单张整合好的sprite图片在100KB以内。
按分类整合图片。
为了方便计算尺寸，一般情况会将sprites图的坐标计算成整数倍。

CSS Sprites使用教程举例：

几个按钮icon（宽高均为20px）整后的大图，如下图所示

文章图片
HTML页面

class="sprites1">付款图标 class="sprites2">存款图标 class="sprites3">删除图标 class="sprites4">粘贴图标 class="sprites5">笑脸图标

CSS样式

.sprites{ width: 200px; margin: 50px auto; } .sprites div{ margin: 5px; } .sprites span{ float: left; width: 20px; height:20px; background: url('./images/icon.png'); /* 引用精灵图 */ background-size: 60px 40px; } .sprites1{ background-position: 0 0; } .sprites2{ /* 使用background-position定位图标的准确位置 */ background-position: -20px 0 !important; } .sprites3{ background-position: 0 -20px !important; } .sprites4{ background-position: -20px -20px !important; } .sprites5{ background-position: -40px 0 !important; }