市面上有一些CSS Sprite Generator，要么是需要手動(dòng)調(diào)整圖片位置，要么需要保存圖片并拷貝粘貼css代碼，用起來(lái)很是麻煩，想必這也是沒(méi)有大規(guī)模使用起來(lái)的原因吧。

CssGaga使用了不同的思路，簡(jiǎn)化了所有這些操作，使用時(shí)只需將css拖進(jìn)CssGaga這一步即可完成所有操作！

下面通過(guò)一個(gè)例子來(lái)說(shuō)明： 比如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}

同時(shí)生成sprite圖片sprite/style.png和sprite/style.jpg

文件對(duì)比：

使用方法

• 選中AutoSprite開(kāi)啟此功能
• 碎圖片放在slice文件夾，slice文件夾與css文件同級(jí)且引用時(shí)為相對(duì)路徑
• css語(yǔ)句不能縮寫，即下面這種不被支持

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

  要按照下面這種寫法

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

  引號(hào)單雙無(wú)所謂，不寫也行，反正最后都會(huì)被壓縮掉

  強(qiáng)烈建議使用 Slice to Code 功能，既省事又不會(huì)出錯(cuò)

文件

• slice為png8、png32、靜態(tài)gif和jpg格式
• 合并后的sprite位于與slice同級(jí)的sprite文件夾中，已壓縮，文件名為該css文件名+圖片后綴（png/jpg）
• sprite后的png為帶alpha透明的png8（fireworks有這個(gè)功能，photoshop沒(méi)有），可用來(lái)實(shí)現(xiàn)漸進(jìn)增強(qiáng)
• sprite中每個(gè)slice的間距是1px
• 每個(gè)css文件生成的sprite圖片最多有3個(gè)：
  1. IE6下劃線hack寫法的png拼為一張，名為css文件名-ie6.png

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

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

注：使用同步功能時(shí)可把css和sprite拷過(guò)去

拆分

由于png8的顏色數(shù)只有256色，雖然CssGaga會(huì)智能壓縮，但有時(shí)會(huì)因此出現(xiàn)失真的情況，解決方法有：

1. 將顏色數(shù)多的不透明圖片改為jpg格式
2. 拆分AutoSprite，詳見(jiàn)下文

另外，有時(shí)需對(duì)公用的文件進(jìn)行拆分，舉例來(lái)說(shuō)，index.css調(diào)用了這幾個(gè)文件

@import url('header.css');@import url('index.import.css')@import url('footer.css')

header.css和footer.css是很多頁(yè)面公用的，按照現(xiàn)在這種方式header和footer中slice會(huì)合并到index.png上，怎么樣獨(dú)立出header.png和footer.png呢？

很簡(jiǎn)單，在header.css和footer.css中加入這一句：

#CssGaga{background-image:none}

注：

• 當(dāng)作普通的css規(guī)則來(lái)寫即可，如果注釋掉的話則不生效；CssGaga壓縮后的文件中會(huì)把這一句去除
• 當(dāng)header.png和footer.png重新生成時(shí)其slice的position可能會(huì)改變，其它調(diào)用header.css和footer.css的css最好一起更新，比如list.css

  @import url('header.css');@import url('list.import.css')@import url('footer.css')

  發(fā)布時(shí)只生成index.css，而不生成list.css，則list.css中的header.png和footer.png的background-position還是舊的，解決方法有一個(gè)原則：改什么拖什么

  比如此次更改了header.css，則將header.css拖進(jìn)CssGaga生成即可，拖進(jìn)來(lái)之前一定要先選中檢查關(guān)聯(lián)性，這樣所有調(diào)用header.css的css都會(huì)重新生成一遍，所有重新處理過(guò)的文件會(huì)出現(xiàn)在最后生成的文件列表里，按這個(gè)步驟發(fā)布文件再安全不過(guò)了