在 Mac 上制作 CSS 精灵图
将图标打包到一张图像中，附带显示每个图标的 CSS，以及 HTML 预览。
Mac 上的精灵图生成器
App 截图，使用的是示例文件。
如何使用精灵图生成器
- 1
拖入图标
添加两张或更多图像。每个文件名都会成为一个 CSS 类名，所以请先起好名字，例如“search.png”和“cart.png”。
- 2
设置间距和前缀
选择图标间距和 CSS 类名前缀。
- 3
标记视网膜图标
如果你的图标是 @2x，请打开视网膜选项，让它们以一半尺寸清晰显示。
- 4
点按“制作打印页”
图标会按行排列并存储为 sprite.png，连同 sprite.css 和 preview.html 页面，放在“下载” › OneMacTools 中一个带日期的文件夹里。
- 5
在你的网站上使用
将 sprite.png 和 sprite.css 放在一起，链接 CSS，然后为元素添加相应的类。打开 preview.html 可查看所有类。
精灵图生成器的功能
任意尺寸的图标都会按行紧密排列，每个图标都有自己的 CSS 类，带有正确的位置和尺寸，预览页会显示所有图标。你可以设置图标间距、类名前缀，以及图标是否为 @2x（让视网膜屏显示更清晰）。
适合
- 一次请求加载一整套图标
- 制作游戏精灵图
- 为网站打包旗帜或表情符号
选项说明
- 图标间距
- 0、2、4 或 8 px，默认为 2 px。留出一点间距，可避免页面缩放时相邻图标互相渗色。
- 图标为 @2x（以一半尺寸显示，在视网膜屏上更清晰）
- 默认关闭。打开后，CSS 会以像素尺寸的一半显示每个图标，并相应缩放整张图，让双倍分辨率的图标在视网膜屏幕上清晰锐利。
- CSS 类名前缀
- 每个类名的开头；留空则为“icon”。使用前缀 icon 时，“search.png”会变成 .icon-search。
最佳实践
- 开始之前，请用小写字母和连字符命名文件。类名会根据文件名生成，并会自动去掉“@2x”。
- 使用背景透明的图标，让精灵图在任何颜色的页面上都适用。
- 把视网膜图标做成显示尺寸的整整两倍，并使用偶数像素尺寸，这样减半后的尺寸都是整像素。
- 之后再用“压缩 PNG”压缩 sprite.png；对于图标表，调色板 PNG 通常小得多。
- 如果图标会被缩放，或在页面放大时显示，请使用 2 px 或更大的间距。
兼容
- 输入
- 两张或更多任意尺寸的图像，通常是 PNG 图标。
- 输出
- sprite.png（所有图标打包在一起）、sprite.css（每个图标一个类，包含其尺寸和位置）以及 preview.html。
- 不同尺寸的图标会按行紧密排列，最高的排在最前面。
- 同名文件会得到带编号的类名，例如 -2，因此不会丢失任何一个。
关于精灵图生成器的问题
什么是 CSS 精灵图？
一张包含多个图标的图像，配合 CSS 通过移动背景让每个元素只显示一个图标。只需一次请求即可加载所有图标。
如何在我的网站上使用精灵图？
将 sprite.png 和 sprite.css 上传到同一文件夹，在页面中链接该 CSS，再为元素添加 class="icon icon-search" 之类的类名。
类名是如何生成的？
取自每个文件名，转为小写，空格和符号会变成连字符，并放在你的前缀之后。例如，前缀为 icon 时，“Shopping Cart.png”会变成 .icon-shopping-cart。
可以使用不同尺寸的图标吗？
可以。每个图标保持各自的尺寸，其 CSS 类会获得相应的宽度和高度。
如何让精灵图在视网膜屏上保持清晰？
按显示尺寸的两倍制作图标，并开启 @2x 选项。这样 CSS 会以一半尺寸显示它们，在高分辨率屏幕上很清晰。
可以用来制作游戏精灵图吗？
可以。sprite.css 列出了每张图像在精灵图上的位置和尺寸，你可以将其读入游戏引擎或 canvas 代码。
精灵图生成器会上传我的文件吗？
不会。精灵图生成器完全在你的 Mac 上运行，文件绝不会离开你的 Mac，离线也能用。
精灵图生成器会改动我的原文件吗？
不会。结果会存储为新文件，放在“下载 › OneMacTools”中带日期的文件夹里；除非你打开了另有说明的选项，否则原文件会原封不动。
精灵图生成器需要什么？
只需一台运行 macOS 26 或更高版本的 Mac，无需安装其他任何东西。
下一步
通过减少颜色将 PNG 缩小 60–80%，并保留透明度——非常适合截图、标志和图标。
图像转 Base64将图像转为 Base64 Data URI，可直接粘贴到 HTML、CSS 或 JSON 中。
