css --- css sprites 原理与应用

css sprites 允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来。通过CSS属性background-image组合background-repeat, background-position等来实现，通过调整background-position的数值，背景图片就能以不同的面貌出现在你眼前。

HTML倾向于语义化，在一般情况下不再在标记里写装饰性的内容，而是把呈现的任务交给了CSS。缺点是不容易维护；

css sprites 适用范围：

1）需要通过降低http请求数，完成网页加速；
2）网页中含有大量小图标。或者，某些图标通用性很强；
3）网页中有需要预载的图片。主要是 a 与 a:hover 背景图这种关系的。如果a与a:hover的背景图分别加载，那么，就会出现用户鼠标移到某个按钮上，按钮的背景突然消失再出来，产生“闪烁”。

雪碧图制作流程，可以参考：https://www.jianshu.com/p/84d7aa090ba1