1、 准备需要整合在一起的小图片；
2、 打开CSS背景图合并工具，在线地址：http://s.uis.cc/pw/；
3、 选择多张图片，单机“打开”按钮，如图：
4、 排布图片：可以选择程序提供的按钮完成横竖的默认排布，也可以用鼠标选中图片拖动位置，拖动完成后程序会根据内部图片的位置，生成面积最小的背景图。
5、 代码生成：在程序中可以查看每张小图片的CSS代码，建议生成图片后再复制生成的代码，如图：
6、 单击“选择目录并生成测试文件”按钮，调整目录，生成图片即可，如图 【图片】。生成之后会得到一个合并的背景图以及每张图相应位置的代码。
Tips：导入的图片文件名称建议使用中文。
CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
此标签是用来定义一些未来可能要重复使用的图形的，里面的图形不会显示出来,官方的定义为“引用的元素容器”。
icon fonts利用字体工具把我们平时 Web 上用的图形图标（icons）转换成 web fonts，就成了 icon fonts，它可以借助 CSS 的 @font-face 嵌入到网页里，用以显示 icons。因为字体是矢量化图形，它天生具有「分辨率无关」的特性，在任何分辨率和PPI下面，都可以做到完美缩放，不会像传统位图， 如：png，jpeg，放大后有锯齿或模糊现象。
Base64要求把每三个8Bit的字节转换为四个6Bit的字节（3*8 = 4*6 = 24），然后把6Bit再添两位高位0，组成四个8Bit的字节，也就是说，转换后的字符串理论上将要比原来的长1/3。最常见的用于传输8Bit字节代码的编码方式.通俗的就是加密解密的一种算法.
注意：不要等到你完成切片之后才开始sprite.如果你边切图边写CSS，然后等你完成了整个网站之后再来拼接这些图片到一个Sprite中，你就不得不完全重写你的CSS，你也必须要花费很多的时间来用PS拼接大量的图片——这是件令人倍感纠结的事情。但是如果边切图边整合，就会比较容易些。
把图片放到它要显示的地方的相对的地方这个小技巧貌似比较难理解。
我直到创建一个比较大的sprite的时候才理解到这一点。比如，如果我们希望一个图片出现在一个元素的左侧：
将那个图片放到sprite图片的右边(本文开始的那个sprite图片)。这样的话，当你通过CSS移动背景图片的位置的时候，基本上不可能有其它的小图片意外的出现在它的附近。使用Sprite的时候常常遇到的一个问题是图片会出现在它不该出现的位置。
定位时避免使用bottom或right等
当
使用CSS sprite的时候，只用background-position: bottom
-300px或background-position: right
-200px非常容易。这刚开始的时候是可行的，但是问题是，当你在宽度上或高度上扩展相关sprite图片的时候，原先设置的位置可能是错的，因为那
个图片已经不再Sprite图片的底部或右部了。使用确切的位置来避免这个问题。
给每个图片足够的空间
就像你在本文顶部的实例图片看到的那样，那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢？ 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距，以至于其它图片不会意外出现。
例子：
例子中的每个条目都有个带数字的图片作为背景图片。如果你仔细看了上面的那张图片，你可以看到这三个数字图片是如何错开排列的，这样如果内容增多，其它图片就不会意外出现。
不用担心Sprite图片的像素大小
如
果你的网站经过良好的设计，那么你将会有一大堆的图片来整合进到sprite里面，这样你就需要你个非常大的sprite来恰当的放置这些图片。这是很不
错的。sprite里的空白不会占用太多的文件大小。addons.mozilla.org上使用的Sprite图片有1,000px×2,000
px那么大，但是图片的大小仅仅16.7kb
当用户往U盘中拷200张图片，会等很久。但是如果弄成一个文件，再拷贝就会快很多。
CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。
实现方法：
首先将小图片整合到一张大的图片上
然后根据具体图标在大图上的位置，给背景定位。background-position:-8px -95px
