logo
GeekFormat

CSS 精靈圖產生器

点击上传图片

支持格式：PNG, JPG, WebP

050

上傳圖片以預覽雪碧圖

線上將多個小圖合併為精靈圖並自動產生 CSS 代碼，適合網站圖示整合與減少 HTTP 請求。

相關推薦

QR 碼掃描器

調整圖片尺寸

圖片旋轉與翻轉

圖片轉 ASCII

Base64 轉圖片

Slug 產生器

適用場景

  • 將網站常用圖示合併為精靈圖以減少 HTTP 請求
  • 為電商網站合併商品圖示與功能按鈕圖示
  • 整合 App 或網頁的 UI 圖示資源
  • 為前端專案快速產生精靈圖與對應 CSS 代碼

功能特點

  • 批次上傳與拖曳排序：多張圖片一次上傳，拖曳調整合併順序
  • 多種佈局方式：支援垂直、水平和網格佈局，自由選擇排列方式
  • 自訂間距與即時預覽：設定圖示間距並即時查看合併效果
  • 自動產生 CSS 代碼：合併完成自動生成 CSS 類別代碼，一鍵複製使用

使用方法

  1. 上傳要合併的多張圖片
  2. 拖曳調整順序並選擇佈局方式
  3. 設定圖示間距並預覽合併效果
  4. 下載精靈圖並複製產生的 CSS 代碼

常見問題

什麼是 CSS 精靈圖？為什麼要用？

CSS 精靈圖（Sprite）是將多個小圖示合併成一張大圖的技術。這樣可以減少 HTTP 請求次數，加快網頁載入速度，非常適合網站圖示整合。

可以調整圖示的排列順序嗎？

可以。支援拖曳調整合併順序，也能選擇垂直、水平或網格佈局，自由控制圖示排列方式。

會自動產生 CSS 代碼嗎？

會。合併完成後自動產生對應的 CSS 類別代碼，支援一鍵複製，直接貼到您的樣式表中使用。

可以自訂圖示之間的間距嗎？

可以。您可以設定圖示間距並即時預覽合併效果，確保最終精靈圖符合您的設計需求。