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个：
  1. IE6下划线hack写法的png拼为一张，名为css文件名-ie6.png

     _background-image:url('slice/1.png')

  2. 除上面之外的png拼为一张，名为css文件名.png
  3. 所有jpg拼为一张，名为css文件名.jpg

注：使用同步功能时可把css和sprite拷过去

拆分

由于png8的颜色数只有256色，虽然CssGaga会智能压缩，但有时会因此出现失真的情况，解决方法有：

1. 将颜色数多的不透明图片改为jpg格式
2. 拆分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都会重新生成一遍，所有重新处理过的文件会出现在最后生成的文件列表里，按这个步骤发布文件再安全不过了