這個工具可為您自動產生 CSS 圖片合併。 只需傳送一個內含2個以上圖片文件 (GIF, PNG or JPG) 的 ZIP 壓縮檔,就會為您自動產生合併後的圖片與 CSS 程式碼。

選項

這個工具可配置多個選項,以滿足您的需求。說明如下:

調整原圖片大小

寬度 & 高度
如果寬度或高度設定為小於 100% ,圖片將在合併之前自動調整。這個工具不會放大圖片以保證圖片質量 。預設值為 100% (不調整)。

重複圖片

忽略重複圖片
重複圖片視為不同圖片合併輸出,並建立不同 CSS 規則。
去除重複圖片但合併規則
根據各圖片文件 MD5 值判斷是否重複。重複圖片將合併成一個圖片並輸出同一條 CSS 規則。

合併圖片輸出選項

水平偏移
設定各圖片間的水平間距大小。請設定足夠大的值以預防 原生背景圖重複 bug。 建議使用預設值。
垂直偏移
設定各圖片間的垂直間距大小。請設定足夠大的值以在使用者調整字型大小時能正確顯示背景圖。一般情況下,我們建議背景圖在當使用者放大2個字級後,仍然可正確顯示。
背景色
設定輸出圖片的背景顏色。為 3 或 6 位 數字十六進制值。如果留空白,將用於非透明圖像,黑色則為透明。
合併圖片輸出格式
支援 GIF, PNG 和 JPG。 GIF 和 PNG 可為透明背景色。預設為 PNG。

CSS 輸出選項

CSS 前文
所輸入的字符將增加到每條 CSS 規則前。支援 ID 選擇器和 CLASS 選擇器。允許的字符: a-z, 0-9, _, -, #.
樣式文件名
樣式正規表示。當文件名中選取正規表示小括號 () 樣式的字段。提取的字段用做各圖片預設 CSS 規則名稱。
Class 前文
所輸入的字符將增加到每條 CLASS 規則前。可用於防止產生以數字為開頭的選擇器(W3C 建議標準下) 。允許的字符: a-z, 0-9, _-。不能以數字為開頭。
CSS 後文
所輸入的字符將增加到每條 CSS 規則後。允許的字符與 "Class 前文 " 相同。