CSS精灵图生成器
免费在线使用 CSS精灵图生成器 无需安装即可使用工具
關於 CSS Sprite Generator
將多張上傳的圖片（PNG、JPEG 或 SVG）合成為單張 PNG 雪碧圖（sprite sheet），在 canvas 上算繪，並產生對應的 CSS background-position 規則。提供三種版面：horizontal（水平）、vertical（垂直）和 packed（依行換列）。可選的像素間距（Padding）可插入至各圖片之間。
如何使用
1. 點擊上傳區域或將圖片檔案拖曳至其中。接受 PNG、JPEG 和 SVG；非圖片檔案會被過濾掉。 2. 選擇 Layout（Horizontal、Vertical、Packed）以及可選的 Padding（以像素為單位，0-100）。 3. 點擊 Generate。會在棋盤格背景上顯示雪碧圖預覽。 4. 點擊 Download 儲存 sprite.png，並使用 Copy CSS 複製產生的 CSS 規則。
版面與 CSS 輸出
Horizontal 將圖片由左至右排成單一列，高度等於最高的圖片高度。Vertical 將圖片由上而下堆疊成單一欄，寬度等於最寬的圖片寬度。Packed 依據一個由 ceil(sqrt(count)) 乘以最寬圖片寬度得出的換行寬度自動換列。產生的 CSS 會為每張圖片輸出一個 '.icon-<name>' 類別，包含 width、height、一條 'background: url(sprite.png) no-repeat' 宣告，以及一個負值的 background-position。檔名會去除副檔名，並被規範化為 [a-zA-Z0-9_-]。
▶支援哪些圖片格式？
透過檔案 accept 篩選器支援 PNG、JPEG 和 SVG。任何 MIME 類型以 'image/' 開頭的檔案都會被載入；其餘檔案會被靜默捨棄。輸出的雪碧圖一律為 PNG（透過 canvas.toDataURL）。
▶為什麼 SVG 算繪出來的尺寸不正確？
該工具會在載入 SVG 後讀取 img.naturalWidth/naturalHeight。沒有固有尺寸的 SVG 可能會回報 0x0 或一個預設尺寸，這隨後就成為它在雪碧圖中的槽位尺寸。
▶產生的 CSS 引用的圖片 URL 正確嗎？
CSS 使用的是 'url(sprite.png)'。如果您將下載的檔案另存為不同的名稱或路徑，必須編輯 CSS 輸出中的 url() 使其相符。
▶packed 版面是真正的裝箱演算法嗎？
不是。它只是一個簡單的換列排布，換列寬度由圖片數量和最寬圖片寬度推導得出。它不會最小化總面積，也不會依高度排序，因此產生的雪碧圖可能會留有空白。
如果这个工具对你有帮助，请考虑请我喝杯咖啡。
請幫我買杯咖啡吧。