1、 准备需要整合在一起的小图片；
2、 打开CSS背景图合并工具，在线地址：http://s.uis.cc/pw/；
3、 选择多张图片，单机“打开”按钮，如图：
4、 排布图片：可以选择程序提供的按钮完成横竖的默认排布，也可以用鼠标选中图片拖动位置，拖动完成后程序会根据内部图片的位置，生成面积最小的背景图。
5、 代码生成：在程序中可以查看每张小图片的CSS代码，建议生成图片后再复制生成的代码，如图：
6、 单击“选择目录并生成测试文件”按钮，调整目录，生成图片即可，如图 【图片】。生成之后会得到一个合并的背景图以及每张图相应位置的代码。
Tips：导入的图片文件名称建议使用中文。
CSS sprites在线生成工具就有好多
csssprites.com, Sprite Cow, Sprits Pad都是不错的选择
当然专业的设计师喜欢用Photoshop
注意：不要等到你完成切片之后才开始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
