精靈圖 CSS 產生器

上传雪碧图后预览网格划分

雪碧图
列数
行数
类名前缀
CSS 輸出

精靈圖 CSS 產生器

上傳雪碧圖後按行列切分,自動產生 background-position 定位程式碼,減少多圖示請求。適合圖示集與遊戲幀圖。

  • 支援 PNG / JPG 等常見圖片格式本機上傳
  • 可設定列數、行數與 CSS 類別前綴(如 icon)
  • 預覽區疊加虛線網格,直觀查看每個切片區域
  • 為每個格子輸出獨立 class,含 width / height / background-position