使用msbuild創建CSS精靈？

Question

有沒有人見過工具，甚至是一個過程概念，從現有的網站的圖像生成CSS精靈，並在構建過程中的CSS？

我應該想到的步驟將是：

1. 走路的圖像目錄
2. 在該目錄中
3. 創建所有圖像的單個Sprite文件爲每個圖像
4. 發現任何CSS類使用該圖像
5. 更新css類以使用新的精靈文件

我將使用asp.net，所以msbuild中的東西會很棒。但是，即使接近我也很少發現。

Answer 1

您可以使用此http://spritegen.website-performance.org/這是BSD許可代碼。 （請參見右下方的下載鏈接。）

Answer 2

像這樣的自動過程只有在您有一些簡單圖像時纔有效。有幾個原因需要手動執行此過程：

某些圖像格式比其他圖像格式的精靈效果更好。如果您嘗試使用JPEG圖像製作精靈，壓縮將很容易從一幅圖像流到另一幅圖像，從而導致僞影。索引顏色格式（如GIF和8位PNG）的顏色數量有限，所以如果將圖像顏色調色板變得太多，則會丟失顏色。

您可能想重複水平或垂直圖像，這使得組合精靈圖像變得更加困難。

如果圖像小於您使用它的元素，則必須使用透明像素填充圖像。如果元素的大小以任何方式是動態的，那麼自動處理甚至不知道圖像需要多少填充。