精灵图生成

📖 工具说明

1. 为什么需要精灵图（Sprites）？

在网页开发中，大量的小图标（如菜单图标、社交分享按钮）会导致页面加载缓慢：

• 减少 HTTP 请求： 加载一张 100KB 的大图远比加载 20 张 5KB 的小图快，因为减少了多次请求带来的握手延迟。
• 解决闪烁问题： 避免鼠标悬停（Hover）时因加载新背景图而产生的瞬间“白块”或闪烁现象。
• 统一资源管理： 将零散的 UI 元素集中管理，方便版本更新和 CDN 缓存。

2. 核心功能解析

本站 工具将繁琐的图片排列和坐标计算自动化：

A. 智能拼合算法

• 排列模式： 支持水平排列、垂直排列或紧凑布局（自动计算最优路径以节省空间）。
• 间距设置 (Padding)： 自定义图标之间的像素间距，防止在高清屏或缩放时出现相邻图标边缘渗漏。

B. 自动代码生成 (Auto-CSS)

• 背景坐标计算： 精确输出每个图标的 background-position（如 -50px -20px）。
• 类名自定义： 根据上传的文件名自动生成对应的 CSS 类名，保持代码整洁。

C. 视网膜屏适配 (Retina Support)

• 支持生成 @2x / @3x 规格的精灵图，并提供对应的 background-size 计算，确保图标在 iPhone 等高分屏上清晰不模糊。

D. 隐私与性能

• 本地处理： 图片合成逻辑完全在浏览器本地内存中完成。 您的原始素材不会上传到服务器，保障设计资产的安全。

3. 操作流程简述

1. 批量上传： 点击“选择文件”或直接将所有 PNG/JPG 图标拖入上传区域。
2. 调整参数：
   • 选择排列方向。
   • 设置图标间的间距（建议设为 2px 或以上）。
3. 预览拼合图： 工具会实时显示合成后的长图或方块图。
4. 下载结果：
   • 点击“下载拼合图”保存合成后的 PNG 图片。
   • 点击“复制代码”获取配套的 CSS 样式表。
5. 应用代码： 在 HTML 中为元素添加对应的类名即可完成部署。

4. CSS 代码应用示例

生成的 CSS 通常如下所示：

CSS

/* 通用基础样式 */
.sprite {
  background-image: url('sprites.png');
  background-repeat: no-repeat;
  display: inline-block;
}

/* 具体图标定位 */
.icon-home {
  width: 24px;
  height: 24px;
  background-position: 0 0;
}
.icon-user {
  width: 24px;
  height: 24px;
  background-position: -26px 0; /* 自动计算的位移 */
}

5. 为什么选择本站精灵图助手？

• 免安装： 无需开启 Photoshop 或安装 Node.js 插件，网页即开即用。
• 实时性： 增减图标瞬间重新计算坐标，无需手动测量像素。
• 高压缩率： 生成的拼合图经过算法优化，体积小巧。
• 完全免费： 没有任何功能限制，是 UI 切图和前端重构的提效利器。

📖 相关推荐