CSS 雪碧图生成器

功能简介

CSS 雪碧图生成器把一组图标或小图合成一张雪碧图，并生成显示每张图所需的 CSS。添加 PNG、SVG、GIF 或 JPG 文件，选择排列方式，就能下载雪碧图 PNG 和样式表，每张图对应一个类名。

类名取自文件名：Home Icon.png 会变成 .icon-home-icon，重名时自动加序号。「紧凑」排列用装箱算法把不同尺寸的图片放进尽量小的画布；「纵向」「横向」「网格」则让位置更有规律。

使用方法

1. 点「添加图片…」选择图标（也可以先用示例图标试试）。
2. 选择「排列方式」和「间距」。留一点间距可以避免浏览器缩放时相邻图标互相渗色。
3. 设置「类名前缀」，以及 background-image 里用到的「雪碧图文件名」。
4. 如果原图是为视网膜屏按两倍尺寸画的，选「@2x」。
5. 点「下载 PNG」和「下载 CSS」（也可以点「复制图片」把雪碧图直接粘贴到设计工具或聊天里），上传后这样使用：<span class="icon icon-home"></span>。

示例

.icon {
  display: inline-block;
  background-image: url("sprite.png");
  background-repeat: no-repeat;
}

.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

小提示

• 一起更新的图标放在同一张雪碧图里；重新生成后所有位置都会变化。
• 需要用 CSS 改颜色的单色图标，用 SVG 图标或内联 SVG 可能更合适。