CSS 精靈圖產生
免費線上 CSS Sprite 精靈圖產生工具
什麼是 CSS 精靈圖？
CSS 精靈圖將多張小圖合併為單一圖片檔案（精靈圖表）。然後使用 CSS 的 background-position 顯示合併檔案中的各個圖片。這減少了 HTTP 請求數量，提高了頁面載入效能。
如何建立 CSS 精靈圖
上傳多張圖片。選擇版面配置（水平、垂直或網格）。工具將它們合併為單一精靈圖表，並產生每張圖片的 background-position CSS 值。
▶CSS 精靈圖還有用嗎？
隨著 HTTP/2 多工處理的普及，精靈圖的效能優勢有所降低。但在提供大量小圖示或需要單檔案快取的圖示系統時，精靈圖仍然有幫助。
▶精靈圖使用什麼版面配置最好？
水平版面適合少量圖片，較為緊湊。網格版面適合許多相同大小的圖示。垂直版面適用於所有圖片寬度相同的情況。
▶如何使用產生的 CSS？
CSS 使用精靈圖表作為 background-image，並用 background-position 定位每個圖示。將產生的類別套用到你的 HTML 元素上即可。