UD5工具箱
快速开始创建精灵图
访问图片精灵图手动生成器的在线页面后，您将看到工具的主界面。界面左侧是设置面板，包含排列方向、列数、间距、缩放、前缀、背景色、输出格式等选项。右侧是图片上传区域和预览区域。最简单的使用方式是将多张图片拖拽到上传区域，然后在设置面板中调整参数，最后点击下载按钮获取精灵图文件和CSS代码。整个过程通常只需要几秒钟即可完成。
第一步：上传图片文件
点击上传区域或直接将图片文件拖拽到上传区域中。工具支持同时上传多张图片，您可以一次性选择所有需要合并的图标文件。支持的图片格式包括PNG、JPEG、WebP、SVG和GIF。上传完成后，图片会按照文件名排序显示在列表中，每张图片会显示缩略图预览和文件名。如果您需要调整图片的排列顺序，可以在列表中拖拽图片进行重新排列。排列顺序会影响最终精灵图中图片的位置。
第二步：选择排列方向
在设置面板中选择图片的排列方向。水平排列将所有图片排列在同一行中，垂直排列将所有图片排列在同一列中，网格排列将图片按照指定列数排列成行列网格。对于大多数场景，推荐使用网格排列方式，因为它能在宽度和高度之间取得平衡。如果您有特殊的布局需求（如需要与特定的CSS布局配合），可以选择水平或垂直排列。选择排列方向后，右侧的预览区域会立即更新显示对应的精灵图效果。
第三步：设置列数和间距
如果您选择了网格排列，可以设置每行显示的图片数量（2到12列）。列数的选择会影响精灵图的宽高比例。一般建议列数设置为图片总数的平方根附近。例如，如果有16张图片，设置4列会生成接近正方形的精灵图。如果有12张图片，设置3列或4列都是不错的选择。然后设置图片之间的间距，建议设置为1到2像素以防止像素干扰。间距设置过大虽然可以完全避免像素问题，但会增加精灵图的总体积。
第四步：调整缩放和背景色
如果您的原始图片尺寸不一致，可以使用缩放功能将它们统一到相同的比例。设置缩放比例为100%保持原始尺寸不变。如果需要缩小图片以减小文件体积，可以设置为75%或50%。如果需要放大图片，可以设置为125%或150%。然后选择背景色：纯色背景适合需要固定背景色的图标，可以选择与网站背景匹配的颜色；透明背景适合需要在不同背景上显示的图标，推荐大多数场景使用透明背景。
第五步：设置类名前缀和输出格式
设置CSS类名的前缀。如果您的项目有命名规范或需要避免类名冲突，可以设置自定义前缀。例如，如果您的项目使用BEM方法论，可以设置前缀为sprite-block-name_。如果不需要前缀，可以留空。然后选择输出格式：PNG格式适合需要透明背景的场景；JPEG格式适合不需要透明的彩色图片，文件更小；WebP格式兼顾透明支持和最小文件体积，是性能最优的选择。
第六步：预览和调试
在右侧预览区域查看生成的精灵图效果。如果开启了网格线显示，可以清楚地看到每张图片的位置和边界。检查图片是否排列整齐、间距是否均匀、是否有图片被裁切或溢出。如果发现问题，可以回到设置面板调整参数。例如，如果图片边缘出现颜色渗透，可以增加间距值；如果精灵图太大，可以调整缩放比例或列数。反复调整直到获得满意的效果。
第七步：复制CSS代码和下载精灵图
确认预览效果满意后，点击复制CSS代码按钮将生成的CSS样式代码复制到剪贴板。然后点击下载精灵图按钮将合并后的图片文件保存到本地。将精灵图图片文件放置到项目的图片目录中（注意CSS代码中的图片路径需要与实际路径一致），然后将复制的CSS代码粘贴到项目的样式文件中。在HTML中为需要显示图标的元素添加对应的类名即可。例如，图片home.png对应的类名是home（如果设置了前缀则为prefix-home），在HTML中使用class="home"即可显示该图标。
第八步：在项目中使用精灵图
将精灵图图片和CSS代码部署到项目后，使用方法非常简单。在HTML中，为需要显示图标的元素添加精灵图对应的类名。工具生成的CSS代码已经为每张图片计算好了background-position偏移量，浏览器会自动从精灵图中截取对应区域显示。您还可以为同一个图标添加不同的状态类名（如hover状态），通过CSS伪类切换不同的background-position来实现图标状态变化。使用精灵图不仅可以提升页面加载性能，还能确保图标在不同网络条件下的显示一致性。