市面上有一些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

文件對比：

使用方法

• 選中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都會重新生成一遍，所有重新處理過的文件會出現在最后生成的文件列表里，按這個步驟發布文件再安全不過了