UD5工具箱
什么是图片精灵图手动生成器
图片精灵图手动生成器是一款专为前端开发者打造的在线工具，用于将多张小图片合并为一张精灵图（CSS Sprite），并自动生成对应的CSS代码。在传统的网页开发中，页面上大量的小图标和装饰图片会触发大量的HTTP请求，严重影响页面加载速度。CSS精灵图技术通过将这些小图片合并到一张大图中，然后使用CSS的background-position属性来定位显示不同的图片区域，从而将数十甚至上百个图片请求减少为一个，大幅提升页面的加载性能。这款工具让精灵图的创建过程变得简单直观，无需使用Photoshop等专业图像编辑软件。
拖拽与点击上传功能
工具支持拖拽上传和点击上传两种方式，让图片添加变得非常便捷。拖拽上传允许用户直接从文件管理器中将多张图片文件拖拽到工具的上传区域，松开鼠标后图片即被添加到待合并列表中。点击上传则通过文件选择器打开系统对话框，用户可以按住Ctrl键选择多个文件进行批量上传。工具支持PNG、JPEG、WebP、SVG和GIF五种常见的图片格式，覆盖了绝大多数网页图标的使用场景。上传的图片会按照文件名排序显示在列表中，用户可以拖拽调整图片的排列顺序。
三种排列方向选择
工具提供水平排列、垂直排列和网格排列三种图片排列方向。水平排列将所有图片从左到右依次排列在同一行中，适合需要水平滚动或宽度不受限制的场景。垂直排列将所有图片从上到下依次排列在同一列中，适合需要垂直滚动或高度不受限制的场景。网格排列将图片按照指定的列数排列成行列网格，是最常用的排列方式，能够在宽度和高度之间取得平衡。每种排列方式都有其适用场景，用户可以根据实际需求和图片数量选择最合适的排列方向。
每行列数与间距设置
在网格排列模式下，用户可以设置每行显示的图片数量（2到12列）。列数的选择会影响生成的精灵图的宽高比例：列数越少，精灵图越窄越高；列数越多，精灵图越宽越矮。用户可以根据图片数量和页面布局需求选择合适的列数。间距设置允许用户为相邻图片之间添加指定像素的间距（0到50像素），防止不同图片的像素在渲染时相互干扰。适当的间距可以避免图片边缘的像素溢出和颜色渗透问题，特别是在使用抗锯齿处理的图片中。
缩放与背景色控制
缩放功能允许用户在25%到200%之间调整每张原始图片在精灵图中的显示大小。缩放后的图片会重新采样到对应的比例，帮助用户在文件大小和显示质量之间取得平衡。缩小图片可以减小精灵图的总体积，但可能导致细节丢失；放大图片可以增加显示尺寸，但可能引入模糊。背景色设置支持纯色和透明两种模式。纯色背景可以选择任意颜色填充图片之间的空白区域，适合需要背景色的图标。透明背景则保持精灵图的透明通道，适合需要在不同背景上显示的图标。
类名前缀与输出格式
类名前缀设置允许用户自定义生成的CSS类名的前缀部分。例如，设置前缀为icon-，则每张图片生成的类名会以icon-开头（如icon-home、icon-user等）。自定义前缀有助于在大型项目中避免CSS类名冲突，也可以配合CSS命名规范使用。输出格式支持PNG、JPEG和WebP三种格式。PNG格式支持透明背景和无损压缩，适合需要透明通道的图标。JPEG格式支持有损压缩，文件体积通常更小，适合不需要透明背景的图片。WebP格式是新一代图片格式，在同等质量下文件体积更小，适合追求极致性能的项目。
网格线显示与CSS代码生成
网格线显示功能可以在精灵图预览中叠加显示网格辅助线，帮助用户直观地查看每张图片在精灵图中的位置和边界。网格线对于调试和验证精灵图的对齐效果非常有用，可以快速发现图片排列不整齐或间距不均匀等问题。工具的核心功能是自动生成完整的CSS代码，包括精灵图的容器样式和每张图片的独立类名。生成的CSS代码可以直接复制到项目中使用，配合精灵图图片文件即可实现背景图片的切换显示。工具还支持一键下载精灵图图片文件和复制CSS代码，让部署过程更加快捷。