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('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/ #CSS文件放在这里 css/img/slice/ #碎图片放在这里 css/img/index/ #首页无需合并的图片放在这里 css/img/index/slice/ #首页用的碎图片放在这里

  • css语句不能缩写,即下面这种不被支持

    background: url('img/slice/1.png')

    要按照下面这种写法

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

    引号单双无所谓,不写也行,反正最后都会被压缩掉

    强烈建议使用 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会智能压缩,但有时会因此出现失真的情况,解决方法有:

  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都会重新生成一遍,所有重新处理过的文件会出现在最后生成的文件列表里,按这个步骤发布文件再安全不过了

生成 png32 格式

详见 AutoSprite 支持生成 png32 格式

AutoSprite 如何支持 Retina

详见 http://www.99css.com/1245

返回CssGaga – 帮助索引