做网页或小游戏资源时，为了减少 HTTP 请求、提升加载表现，经常会用到 CSS 雪碧图（Sprite）：把多张小图拼成一张大图，再用 background-position 分别引用。
麻烦在于：手动在 PS/Figma 里摆位置、再手写坐标，既费时间又容易错一行就全乱套。
nanaSprite 正是为这件事准备的：在浏览器里完成「多图上传 → 自动排版 → 合成预览 → 导出 CSS」，全程可视化，改完立刻能看到效果。
它适合谁？
- 前端开发者：快速产出雪碧图与配套 CSS，直接贴进项目。
- 独立开发者 / 小团队：没有专职切图流程时，一个人也能把资源管线跑通。
- 学习 CSS 背景与定位的同学：通过实时预览理解「一张图、多个坐标」是怎么对应到每一帧的。
为什么值得试？
1. 打开网页就能用
无需本地装软件，访问在线地址即可（见文末链接）。上传支持拖拽或点选，同名文件会自动加序号，避免不小心覆盖。
2. 多种排版，按场景选
除常见的 Binary Tree 紧凑装箱 外，还提供对角阶梯、单行横向、单列纵向等模式，并可设置 帧间距（gap），在「省空间」和「留边距好抠图」之间自己权衡。
3. 预览即所见
合成结果在画布上实时展示，避免「导出后才发现叠在一起」的尴尬。
4. CSS 导出为真实项目着想
支持 background 简写或拆成多行标准属性；类名可按 bg-文件名 / sprite-序号 / 自定义前缀 等规则生成；单位可选 px 或 rem（并可配置 rem 基准）；还能编辑雪碧图文件名，方便和你项目里的静态资源路径一致。
代码带高亮，一键复制，减少从工具到仓库的来回切换。
5. 和 Vite 生态可衔接
若在 Vite 项目里按配置展示雪碧图帧，可搭配官方推荐的 vite-nanaSprite（Vite 插件 + Vue 3 / React 组件），让「生成」与「工程内使用」更顺滑。
底层采用 Vue 3、TypeScript、Vite 等现代前端栈，界面基于 Naive UI，交互清晰，适合长期作为团队里的小工具书签。
结语
如果你正在找一款 专注雪碧图、流程短、导出即用 的工具，不妨把 nanaSprite 放进书签：从多张散图到一张合成图 + 可用 CSS，尽量在一个页面里闭环。
