无需登录 数据私有 本地保存

CSS Sprite生成器 - 图片合并与定位代码生成

优化工具 前端设计 图像工具 CSS Sprite 图片合并 生成器
115
0
0
0
【第一步：准备图片】在使用工具前，请确保准备好需要合并的图片文件。建议将图片统一为相同格式（推荐PNG格式以保留透明度），并保持合理的尺寸，避免过大或过小的图片影响最终效果。图片文件名应简洁明了，便于后续管理和识别，建议使用英文命名并包含功能描述。准备好图片后，将它们放在一个文件夹中，方便批量上传和管理。【第二步：上传图片】打开CSS Sprite生成器页面，点击上传区域或直接拖拽图片文件到指定位置。支持批量选择，可同时上传多张图片。系统会自动识别并显示已上传的图片列表，包括图片缩略图、文件名和文件大小等信息。上传过程中会显示进度条，让用户了解上传状态。上传完成后，可以在列表中查看每张图片的详细信息，并进行删除或重新排序操作。【第三步：选择排列方式】根据图片数量和使用场景，选择合适的排列方式。水平排列适合导航栏图标，垂直排列适合列表菜单，网格排列适合大量小图标。排列方式会影响最终雪碧图的尺寸和CSS代码结构，建议根据实际项目需求进行选择。如果不确定选择哪种方式，可以先尝试网格排列，通常是最节省空间的方案。【第四步：调整设置】可选择是否添加图片间距，间距可以避免相邻图片在渲染时产生粘连，一般建议设置2到4像素的间距。设置自定义类名前缀，便于代码管理和避免样式冲突。确认所有设置后，点击生成按钮开始处理。处理时间取决于图片数量和大小，通常在几秒内完成。【第五步：获取代码】生成完成后，页面会显示合并后的雪碧图预览和对应的CSS代码。每张图片的定位信息都包含在代码中，可直接复制到项目样式表。使用时，为HTML元素添加对应的类名，并设置固定的宽度和高度即可显示正确的图标。建议将CSS代码添加到全局样式文件中，确保在需要的页面中都能正确加载和显示。【常见问题处理】如果图片上传失败，请检查文件格式和大小限制，确保图片符合工具要求。如需调整图片顺序，可拖动图片进行重新排列，排列顺序会影响雪碧图中各图标的位置。生成的代码如需修改，可手动调整background-position的坐标值，坐标单位为像素，负值表示向左或向上偏移。
🔧 相关工具