什么是雪碧图？

雪碧图（CSS Sprite）是将多个小图片合并成一张大图的技术，通过 CSS 的 background-position 属性来显示不同部分，从而减少 HTTP 请求，提升网页加载速度。

功能特点

• 支持批量上传和拖拽
• 自定义列数、间距和外边距
• 灵活的对齐方式（9种位置）
• 自动缩放功能，统一图片尺寸
• 自定义背景颜色
• 实时预览，所见即所得

应用场景

• 网站图标集合（如社交媒体图标）
• 游戏精灵动画帧
• UI 组件库图标整合
• 表情符号包

使用技巧

• 建议使用尺寸相近的图片，以获得更好的排列效果
• 使用透明背景（PNG）可以更灵活地适配不同页面
• 启用自动缩放可以统一不同尺寸的图标
• 适当的间距可以防止图片边缘显示问题

CSS 使用示例

.icon {
  background: url('sprite-sheet.png') no-repeat;
  width: 32px;
  height: 32px;
}
.icon-1 { background-position: 0 0; }
.icon-2 { background-position: -36px 0; }
.icon-3 { background-position: -72px 0; }