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