CssGaga – AutoSprite
市面上有一些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('slice/1.png');}.i2{background-image:url('slice/2.png');}.i3{background-image:url('slice/3.png');}.i4{width:64px;height:64px;background-image:url('slice/4.png');}.i5{background-image:url('slice/3.png');}.i6{width:64px;height:64px;background-image:url('slice/6.gif');}.i11{width:60px;height:60px;background-image:url('slice/1.jpg');}.i12{width:60px;height:60px;background-image:url('slice/2.jpg');}.i13{width:60px;height:60px;background-image:url('slice/3.jpg');}.i14{width:60px;height:60px;background-image:url('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 | after | |
|---|---|---|
| html | before.htm | after.htm |
| css | style.source.css | style.css |
| image | 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
|
5.79KB
sprite/style.png 7.08KB sprite/style.jpg |
使用方法
- 选中AutoSprite开启此功能
- 碎图片放在slice文件夹，slice文件夹与css文件同级且引用时为相对路径
- css语句不能缩写，即下面这种不被支持
background:url('slice/1.png')要按照下面这种写法
background-image:url('slice/1.png')引号单双无所谓，不写也行，反正最后都会被压缩掉
强烈建议使用 Slice to Code 功能，既省事又不会出错
文件
- slice为png8、png32、静态gif和jpg格式
- 合并后的sprite位于与slice同级的sprite文件夹中，已压缩，文件名为该css文件名+图片后缀（png/jpg）
- sprite后的png为带alpha透明的png8（fireworks有这个功能，photoshop没有），可用来实现渐进增强
- sprite中每个slice的间距是1px
- 每个css文件生成的sprite图片最多有3个：
- IE6下划线hack写法的png拼为一张，名为css文件名-ie6.png
_background-image:url('slice/1.png') - 除上面之外的png拼为一张，名为css文件名.png
- 所有jpg拼为一张，名为css文件名.jpg
- IE6下划线hack写法的png拼为一张，名为css文件名-ie6.png
注：使用同步功能时可把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都会重新生成一遍，所有重新处理过的文件会出现在最后生成的文件列表里，按这个步骤发布文件再安全不过了
