自动化工具生成雪碧图+正确CSS配置更省力可靠可维护；但必须配合background-repeat:no-repeat、固定宽高和overflow:hidden，否则图标错位、重复或溢出。
用自动化工具生成雪碧图 + 正确配置 CSS，比手拼图+手算 background-position 省力、可靠、可维护；但工具输出的 CSS 必须配合 background-repeat: no-repeat、固定宽高和 overflow: hidden 才能正确显示图标。
为什么不能靠人眼算 background-position 坐标
图标一多，负值容易写错位（比如该写 -48px 0 写成 -47px 0），尤其当雪碧图里图标间距不均、或导出时带了 1px 边框/抗锯齿毛边，肉眼根本看不出偏差。更麻烦的是，改一个图标位置，所有后续坐标的偏移都要重算——这不是调试，是重蹈覆辙。
- 设计稿给的“第3个图标在 x=48px 处”，实际要写
background-position: -48px 0，因为它是把整张图往左拉 - 工具生成的坐标默认以左上角为原点，但某些拼图工具（如早期 CSS Gaga）会默认居中对齐，导致生成值整体偏移
- 单位漏写
px（例如写成-48 0）在 Safari 旧版和部分安卓 WebView 中会被忽略，图标消失且无报错
webpack-spritesmith 和 gulp.spritesmith 怎么选
优先看构建链路是否支持：本地快速验证用 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 为什么图标还是错位或重复显示
所有工具生成的 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 或构建时自动补前缀的流程，也要确认它是否影响了
background-repeat的输出
真正容易被忽略的，是 overflow: hidden 和 background-size 配合高清屏的使用——哪怕坐标全对，dpr=2 设备上没设 background-size 就会模糊，设了但没配 overflow: hidden 就可能漏出隔壁图标。
