自动化工具生成雪碧图比手写background-position更省力可靠，但必须配合background-repeat: no-repeat、固定宽高及overflow:hidden才能正确显示图标。
直接结论：用自动化工具生成雪碧图 + CSS，比手写 background-position 省力、可靠、可维护；但工具输出的 CSS 必须配合显式 background-repeat: no-repeat 和固定尺寸元素才能生效。
为什么不能靠人眼算 background-position 坐标
图标一多，负值容易写错位（比如该写 -48px 0 写成 -47px 0），尤其当雪碧图里图标间距不均、或导出时带了 1px 边框/抗锯齿毛边，肉眼根本看不出偏差。更麻烦的是，改一个图标位置，所有后续坐标的偏移都要重算——这不是调试，是重蹈覆辙。
- 设计稿给的“第3个图标在 x=48px 处”，实际要写
background-position: -48px 0，因为它是把整张图往左拉 - 工具生成的坐标默认以左上角为原点，但某些拼图工具（如早期 CSS Gaga）会默认居中对齐，导致生成值整体偏移
- 单位漏写
px（例如写成-48 0）在 Safari 旧版和部分安卓 WebView 中会被忽略，图标消失且无报错
选哪个工具？优先看构建链路是否支持
本地快速验证用 gulp.spritesmith，工程化项目直接上 webpack-spritesmith 插件。别用在线生成器——上传源图有泄露风险，且生成的路径（比如 url(sprite.png)）常写死为相对当前页面，而 CSS 文件实际在 /css/ 目录下，上线后 404。
-
gulp.spritesmith：输入icons/*.png，输出sprites.png和sprites.css，后者已含width、height、background-position，但需手动补上background-repeat: no-repeat -
webpack-spritesmith：可在 JS 中import { home, user } from './icons/sprite.js'，返回对象含url、width、height、offsetX/offsetY，适配 CSS-in-JS 或动态 class 注入 - 所有工具生成的 CSS 都不会自动加
overflow: hidden，这点必须手补，否则相邻图标边缘可能漏出来
background-repeat: no-repeat 是硬性前提，不是可选项
雪碧图是一张大图，没关重复，浏览器就按默认行为横向纵向铺满整个容器——你设了 background-position: -24px 0，结果看到的不是单个图标，而是“-24px 0”开始的一整排重复图标。这不是 bug，是 CSS 规范行为。
- 某些旧版 IE 和 Safari 不保证
background-repeat的初始值一定是repeat，依赖默认值等于埋雷 - 建议统一在基础类（如
.sprite-icon）里声明background-repeat: no-repeat，而不是每个子类都写一遍 - 如果用了 PostCSS 或构建时自动补前缀的流程，也要确认它没把这行样式优化掉（极少数配置会删“冗余”声明）
真正容易被忽略的不是怎么生成，而是生成后是否检查了三件事：路径是否相对于 CSS 文件、background-repeat 是否显式关闭、元素是否设置了 width/height 且 overflow: hidden。少一个，图标就可能错位、溢出或集体消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
