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

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

28
0
0
0
拖拽图片到此处上传
或点击选择文件 · 支持 PNG/JPG/GIF/WebP
图片列表 0
尚未添加图片
排列设置
Sprite 预览
上传图片后将在此处显示合并后的Sprite图
生成的CSS代码
/* 上传图片后将自动生成CSS代码 */
图标效果预览
生成Sprite后将在此处预览图标效果
常见问题
什么是CSS Sprite（雪碧图）？
CSS Sprite（雪碧图/精灵图）是一种将多张小图标合并到一张大图中的前端优化技术。通过background-image加载合并后的大图，再使用background-position精确定位显示需要的图标部分。这样做可以大幅减少HTTP请求次数，提升网页加载速度。在HTTP/1.1时代尤其重要，即使在HTTP/2时代，减少请求和利用缓存仍然是有效的优化手段。
CSS Sprite有什么优势？
1. 减少HTTP请求：多张图片合并为一张，只需一次请求。
2. 提升加载速度：减少网络往返，尤其在高延迟网络下效果显著。
3. 避免闪烁：hover切换图标时无需重新加载，体验更流畅。
4. 便于管理：所有图标集中在同一文件中，维护更便捷。
5. 缓存友好：一张sprite图可被浏览器长期缓存。
如何使用生成的CSS代码？
1. 下载生成的Sprite PNG图片，上传到您的服务器。
2. 将生成的CSS代码复制到您的样式表中。
3. 修改background-image的URL为实际图片路径。
4. 在HTML中使用：<span class="sprite icon-xxx"></span>
5. 确保引入基类.sprite（设置display和background-repeat）以及对应图标类（设置尺寸和定位）。
background-position中的负值是什么意思？
background-position: -32px -48px;表示将背景图向左移动32px、向上移动48px。这样，原本位于sprite图(32,48)位置的图标就会出现在元素的可见区域内。简单理解：负值将背景图"拉"到正确的显示位置。本工具自动计算这些定位值，您无需手动计算。
网格排列和水平/垂直排列有什么区别？
水平排列：所有图片排成一行，适合高度一致的图标集。
垂直排列：所有图片排成一列，适合宽度一致的图标集。
网格排列：图片按指定列数自动换行排列，行列自适应图片尺寸，是最灵活的方式，适合尺寸不一的图标集合。网格排列能生成更紧凑的sprite图。
为什么我的sprite图有空白区域？
图片间的空白区域由"图片间距"参数控制（默认为4px）。间距可以防止图标在显示时相互干扰，但也会增加sprite图的整体尺寸。您可以将间距设为0来获得最紧凑的sprite图。另外，在网格排列中，同行/列中较小图片的剩余空间也会显示为空白——这是正常现象，确保每个图标在sprite中有独立的矩形区域。
🔧 相关工具