CSS 雪碧图

怎么用

1. 点选择图片，挑两个以上文件。支持多选，排列顺序就是你选择的顺序。
2. 选排列方式：横向排成一行，纵向排成一列，网格则按你设定的列数换行。
3. 需要图片之间留透明空隙就设间距；网格模式下还要设列数。
4. 点生成雪碧图。合成图出现在 canvas 上，每张图列出尺寸与偏移，CSS 面板里则按图生成规则。
5. 下载 PNG，放到样式表旁边，粘贴 CSS。如果你的文件名不叫 sprite.png，改一下基类里的路径。

常见用法

• 图标集 —— 十几个小图标合成一次请求，而不是十几次请求。
• 游戏或界面瓦片 —— 用网格排好等大的瓦片，偏移直接从输出里读。
• 改造老项目 —— 用现有素材生成雪碧图，不必装构建插件。
• 手写 CSS 前先算好尺寸 —— 让工具算偏移，省得自己数像素。

常见问题

问：数据会上传吗？ 答：不会。图片在浏览器内的 canvas 上解码与合成，PNG 也是本地生成的，未发布的素材不会离开你的设备。

问：为什么图片周围是透明的？ 答：canvas 起始状态是空的，只画你载入的图片，没画到的像素保持透明。原图自身的透明区域也会保留。

问：CSS 里的类名是怎么来的？ 答：取自文件名：转小写、非字母数字的字符换成连字符，再加 sprite- 前缀。文件名处理后为空时会退化为 icon-1、icon-2 这样的名字。

问：合成图能有多大？ 答：取决于浏览器愿意分配的 canvas。尺寸过大可能编码失败，这时工具会如实报错，而不是给你一个损坏的文件。