UD5工具箱
什么是CSS Sprite？
CSS Sprite（雪碧图）是一种将多张小图片合并为一张大图的技术。通过CSS的background-position属性，可以精确控制显示大图中的特定区域，从而用一张图片实现多个图标的效果。这项技术能显著减少HTTP请求次数，提升网页加载性能。
CSS Sprite有什么优势？
CSS Sprite的主要优势包括：减少HTTP请求次数，降低服务器负载；提升页面加载速度，改善用户体验；减少DNS查询次数；便于图片缓存，重复访问时加载更快。特别适合图标较多的网站和应用。
如何使用生成的CSS代码？
首先复制生成的CSS类样式，粘贴到项目样式表中。然后在HTML中为需要显示图标的元素添加对应的类名，并设置固定的宽度和高度。例如「」，其中width和height必须与CSS代码中定义的尺寸一致。
background-position的含义是什么？
background-position属性用于指定背景图片的显示位置。在雪碧图中，使用负值坐标来定位特定图标。例如「background-position: -10px -20px」表示将背景图片向左移动10像素、向上移动20像素，从而显示对应的图标区域。
水平排列和网格排列有什么区别？
水平排列将所有图片按一行排列，生成的雪碧图宽度较大但高度较小，适合横向导航图标。网格排列将图片按行列整齐排列，生成的正方形或接近正方形的雪碧图更适合大量图标的紧凑布局，空白区域更少。
雪碧图中的空白区域有什么用？
空白区域主要用于分隔不同图片，防止渲染时产生视觉粘连。适当的间距可以确保图标边缘清晰，但过多空白会增加文件大小。建议根据图标大小和使用场景设置合理的间距值。
支持哪些图片格式？
本工具支持PNG、JPG、GIF等常见图片格式。推荐使用PNG格式，因为PNG支持透明背景，能更好地适应不同背景色的页面。合并过程中会保持图片原始格式和质量。
生成的图片文件在哪里？
生成完成后，页面会提供合并后雪碧图的下载链接。点击即可保存图片文件到本地。建议将图片放置在项目对应目录中，并在CSS代码中使用正确的相对路径引用。
图片数量有限制吗？
单次处理最多支持100张图片。如果需要合并更多图片，建议分批处理。图片文件大小建议控制在合理范围内，过大的图片会影响处理速度和最终文件大小。
如何调整图片的排列顺序？
在上传图片后，可以通过拖拽操作调整图片顺序。排列顺序会影响雪碧图中各图标的位置，建议按使用频率或功能分组进行排列，便于管理和维护。