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

图片精灵图手动生成器 - 上传多图合成并生成CSS

图像工具 开发工具 CSS 图片合并 生成器 精灵图
28
0
0
0
拖拽图片到此处，或点击上传
支持 PNG / JPEG / WebP / SVG / GIF，单文件最大 20MB
图片列表 0
还没有添加图片
精灵图预览
上传图片后将在此处显示精灵图预览
生成的 CSS 代码
/* 上传图片后将自动生成CSS代码 */

常见问题与知识点

什么是CSS精灵图（Sprite）？
CSS精灵图是将多个小图片合并到一张大图中的技术。通过CSS的 background-image 和 background-position 属性，可以精确显示合成图中特定位置的图片。这能显著减少HTTP请求数量，提升网页加载速度，尤其适合图标、按钮状态图等场景。
水平、垂直和网格排列有什么区别？
水平排列：所有图片排成一行，适合宽度较小的图标集；垂直排列：所有图片排成一列，适合需要垂直布局的场景；网格排列：图片按指定列数排列成多行，最节省空间，适合图片数量较多时使用。
间距（Gap）在精灵图中起什么作用？
间距在图片之间添加透明（或背景色）间隔。这有两个好处：一是在CSS定位时各图片区域不会相互干扰，避免相邻图片边缘意外显示；二是便于在精灵图中清晰区分每张图片的边界。生成的CSS代码会自动计算间距偏移量。
生成的CSS代码如何使用？
将下载的精灵图上传到您的服务器，然后在CSS中将 background-image 的URL替换为实际路径。每个图片对应一个CSS类（格式为：前缀-图片名），在HTML元素上应用对应类即可显示该图片。元素需要设置正确的 width 和 height（代码中已包含）。
为什么选择PNG格式输出？
PNG格式支持无损压缩和alpha透明通道，是精灵图的最佳选择。透明背景的精灵图可以适应各种页面背景色。如果需要更小的文件体积，可以选择JPEG（不支持透明）或WebP格式（兼顾体积与质量，现代浏览器广泛支持）。
如何优化精灵图的文件大小？
建议使用统一的缩放比例（如将所有图标缩放到目标显示尺寸），避免在精灵图中包含过大的原图。上传前可使用TinyPNG等工具对图片进行预压缩。网格排列通常比水平排列更节省空间（总Canvas面积更小）。
🔧 相关工具