精灵图 CSS 生成器

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

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

精灵图 CSS 生成器

上传雪碧图后按行列切分,自动生成 background-position 定位代码,减少多图标请求。适合图标集与游戏帧图。

  • 支持 PNG / JPG 等常见图片格式本地上传
  • 可设置列数、行数与 CSS 类名前缀(如 icon)
  • 预览区叠加虚线网格,直观查看每个切片区域
  • 为每个格子输出独立 class,含 width / height / background-position