css雪碧图（css sprite），其实质就是一种css图像合并的技术。在我们前端开发过程中也多多少少会用到。很早就打算专门写一个相关的demo，今天就趁着这篇博文给做了。demo见我的github仓库文件，相关实现的代码虽然也easy，但也不在这发了（
使用css sprite的相关案例：去电商网站，打开开发者模式，很多。但是也不只是局限在电商网站里才使用！
前端开发里雪碧图原理：
将很多需要加载的图贴到一起，以图片左上角顶点为原点建立坐标系，然后用background-position：x轴 y轴；来确定在大图中需要的那一张小图的位置即可。简而言之，言而简之就是一个background-position属性。
雪碧图的实现：
关于这里说的实现是指众多小图集成的大图这个过程。
1：ps（photoshop）：这个就靠我们伟大的美工了（呸，原谅我口误，是设计师大大），当然作为新时达的大前端我们也还是需要掌握ps滴；
2：相关的sprite自动化生成工具（例如：cssGaga）：亲，还有请自行Google哦！（划下重点：不要搜成ladygaga了）
嗯，好像说webpack里也有相关的依赖模块，老规矩：Google（
使用该技术的优点：
减少了加载网页图片时对服务器的请求次数，提高了页面的加载速度。
使用该技术的缺点：
拼图和维护比较麻烦；雪碧图调用的图片不能被打印；内存问题。
适用css sprite的条件：
加载量大的小图， 就是说我们很多页面都会用到小图标啊这类的；还有就是图片是静态的，也就是说时时刷新的新闻图片啊不可用。