市面上有一些CSS Sprite Generator，要么是需要手动调整图片位置，要么需要保存图片并拷贝粘贴css代码，用起来很是麻烦，想必这也是没有大规模使用起来的原因吧。
CssGaga使用了不同的思路，简化了所有这些操作，使用时只需将css拖进CssGaga这一步即可完成所有操作！
下面通过一个例子来说明： 比如HTML：
<s class="i1"></s><s class="i2"></s><s class="i3"></s><s class="i4"></s><s class="i5"></s><s class="i6"></s>
css源文件：
body{background-color:black;}
s{display:inline-block;width:16px;height:16px;overflow:hidden;background-repeat:no-repeat;}
.i1{background-image:url('img/slice/1.png');}
.i2{background-image:url('img/slice/2.png');}
.i3{background-image:url('img/slice/3.png');}
.i4{width:64px;height:64px;background-image:url('img/slice/4.png');}
.i5{background-image:url('img/slice/3.png');}
.i6{width:64px;height:64px;background-image:url('img/slice/6.gif');}
.i11{width:60px;height:60px;background-image:url('img/slice/1.jpg');}
.i12{width:60px;height:60px;background-image:url('img/slice/2.jpg');}
.i13{width:60px;height:60px;background-image:url('img/slice/3.jpg');}
.i14{width:60px;height:60px;background-image:url('img/slice/4.jpg');}
CssGaga生成后：
body{background-color:black}
s{display:inline-block;width:16px;height:16px;overflow:hidden;background-repeat:no-repeat}
.i1{background-image:url(sprite/style.png);background-position:-130px 0}
.i2{background-image:url(sprite/style.png);background-position:-130px -17px}
.i3{background-image:url(sprite/style.png);background-position:-130px -34px}
.i4{width:64px;height:64px;background-image:url(sprite/style.png);background-position:0 0}
.i5{background-image:url(sprite/style.png);background-position:-130px -34px}
.i6{width:64px;height:64px;background-image:url(sprite/style.png);background-position:-65px 0}
.i11{width:60px;height:60px;background-image:url(sprite/style.jpg);background-position:0 0}
.i12{width:60px;height:60px;background-image:url(sprite/style.jpg);background-position:-61px 0}
.i13{width:60px;height:60px;background-image:url(sprite/style.jpg);background-position:-122px 0}
.i14{width:60px;height:60px;background-image:url(sprite/style.jpg);background-position:-183px 0}
同时生成sprite图片sprite/style.png和sprite/style.jpg
文件对比：
Before
png/gif 总大小：10.2KB
jpg 总大小：9.07KB
slice/1.png
slice/2.png
slice/3.png
slice/4.png
slice/6.gif
slice/1.jpg
slice/2.jpg
slice/3.jpg
slice/4.jpg
After
sprite/style.png 5.79KB
sprite/style.jpg 7.08KB
使用方法
选中AutoSprite开启此功能已改为默认开启，界面上不再有此选项- 碎图片放在slice文件夹，
slice文件夹与css文件同级slice文件夹放置在css文件同级的img文件夹的子目录中，且引用时为相对路径，例如这样的层级：
css/img/slice/ #碎图片放在这里
css/img/index/ #首页无需合并的图片放在这里
css/img/index/slice/ #首页用的碎图片放在这里
- css语句不能缩写，即下面这种不被支持
要按照下面这种写法
引号单双无所谓，不写也行，反正最后都会被压缩掉
强烈建议使用 Slice to Code 功能，既省事又不会出错
文件
- slice为png8、png32、静态gif和jpg格式
- 合并后的sprite位于与css同级的sprite文件夹中，已压缩，文件名为该css文件名+图片后缀（png/jpg）
- sprite后的png为带alpha透明的png8（fireworks有这个功能，photoshop没有），可用来实现渐进增强
- sprite中每个slice的间距是1px
- 每个css文件生成的sprite图片最多有3个： 1. IE6下划线hack写法的png拼为一张，名为css文件名-ie6.png _background-image:url('slice/1.png')
- 除上面之外的png拼为一张，名为css文件名.png
- 所有jpg拼为一张，名为css文件名.jpg
注：使用同步功能时可把css和sprite拷过去
拆分
由于png8的颜色数只有256色，虽然CssGaga会智能压缩，但有时会因此出现失真的情况，解决方法有：
- 将颜色数多的不透明图片改为jpg格式
- 拆分AutoSprite，详见下文
另外，有时需对公用的文件进行拆分，举例来说，index.css调用了这几个文件
@import url('header.css');
@import url('index.import.css')
@import url('footer.css')
header.css和footer.css是很多页面公用的，按照现在这种方式header和footer中slice会合并到index.png上，怎么样独立出header.png和footer.png呢？
很简单，在header.css和footer.css中加入这一句：
#CssGaga{background-image:none}
注：
- 当作普通的css规则来写即可，如果注释掉的话则不生效；CssGaga压缩后的文件中会把这一句去除
- 当header.png和footer.png重新生成时其slice的position可能会改变，其它调用header.css和footer.css的css最好一起更新
比如list.css
@import url('header.css');
@import url('list.import.css')
@import url('footer.css')
发布时只生成index.css，而不生成list.css，则list.css中的header.png和footer.png的background-position还是旧的，解决方法有一个原则：改什么拖什么
比如此次更改了header.css，则将header.css拖进CssGaga生成即可，拖进来之前一定要先选中检查关联性，这样所有调用header.css的css都会重新生成一遍，所有重新处理过的文件会出现在最后生成的文件列表里，按这个步骤发布文件再安全不过了
生成 png32 格式
AutoSprite 如何支持 Retina
详见 /1245