制作雪碧图的辅助工具是ps，先要测出所要的图片的宽高写到代码中去，给它预留位置大小，然后测出所要点击后的图标移动位置的宽高写入代码。

                                                                                              代码示例：①、选择器名字{

                                                                                                                      width：xxPX              （这里可以是正负数，代表的是向左还是向右移动）

         height：xxPX

                                                                                      background：图片位置      xxPX   xxPX(这里指所要移动的像素)

                          }

②、 选择器：hover{                                          （这里代码意思是点击前）

background：图片位置  xxPX  xxPX

}

制作雪碧图代码示例

原文：http://www.cnblogs.com/zapdbk/p/7106910.html