CSS Sprite 產生器

功能簡介

CSS Sprite 產生器會把一組圖示或小圖合併成一張 Sprite 圖，並寫出顯示每張圖所需的 CSS。新增 PNG、SVG、GIF 或 JPG 檔案，選擇排列方式，就能下載 Sprite 圖 PNG，以及每張圖對應一個類別的樣式表。

類別名稱取自檔名：Home Icon.png 會變成 .icon-home-icon，名稱重複時會自動加上編號。緊密 排列使用裝箱演算法，把不同尺寸的圖片放進最小的畫布；垂直、水平 和 格狀 則提供可預期的位置。

使用方法

1. 按 新增圖片… 選擇你的圖示（或先用範例圖示試試）。
2. 選擇 排列方式 和 間距。留一點間距可以避免瀏覽器縮放時相鄰圖示互相滲色。
3. 設定 類別名稱前綴，以及 background-image 中使用的 Sprite 檔名。
4. 如果圖片是為 Retina 螢幕以兩倍尺寸繪製，選擇 @2x。
5. 按 下載 PNG 和 下載 CSS（也可以按 複製圖片 把雪碧圖直接貼到設計工具或聊天裡），把兩個檔案都上傳後，這樣使用類別：<span class="icon icon-home"></span>。

範例

.icon {
  display: inline-block;
  background-image: url("sprite.png");
  background-repeat: no-repeat;
}

.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

小提示

• 會一起更新的圖示放在同一張 Sprite 圖裡；重新產生後所有位置都會改變。
• 需要用 CSS 改變顏色的單色圖示，SVG 圖示字型或內嵌 SVG 可能更合適。