必须设 background-repeat: no-repeat，否则雪碧图会默认平铺，导致目标图标重复显示、定位失效；它是雪碧图正常工作的硬性前提，兼容性要求高，须显式声明。
直接说结论：用 background-image 引入雪碧图，再靠 background-position 精确定位图标区域，是目前最可控、兼容性最好、且不依赖构建工具的落地方式。
为什么必须设 background-repeat: no-repeat
雪碧图是一张大图里塞了多个小图，如果没关掉重复，默认会横向纵向铺满整个元素——结果就是你只想要左上角那个“home”图标，却看到满屏“home home home…”。这是新手最常漏写的样式，也是调试时第一眼该查的点。
-
background-repeat: no-repeat是硬性前提，否则所有定位都失效 - 别依赖浏览器默认值；某些旧版 Safari 或 IE 会表现不一致
- 建议统一写在公共类里（比如
.icon），避免每个图标单独重复声明
background-position 的坐标怎么算才不偏移
坐标是“背景图相对于元素左上角的偏移量”，向右/向下为正，向左/向上为负——但实际写法几乎全是负值，因为你要把大图往左或往上拉，让目标图标“露出来”。
- 假设每个图标宽高都是
24px，图标从左到右水平排列：第1个图标background-position: 0 0，第2个就是-24px 0，第3个-48px 0 - 如果是竖排，第2个图标是
0 -24px，第3个是0 -48px - 注意单位必须带
px（或rem等），-24 0这种写法在部分浏览器下会被忽略 - 用设计稿导出的雪碧图，务必确认图标的对齐基准是左上角；有些工具默认居中对齐，会导致定位偏差
元素尺寸和 overflow: hidden 必须配对出现
雪碧图本身比单个图标大得多，光靠 background-position 只是“挪图”，不是“裁剪”。如果元素没设固定宽高，或者没隐藏溢出，你会看到相邻图标的一部分漏出来。
立即学习“前端免费学习笔记（深入）”；
- 每个使用雪碧图的元素（如
.icon-home）必须有明确的width和height，值等于对应图标的原始尺寸 - 加
overflow: hidden是保险做法，尤其当图标间距不够、或存在抗锯齿毛边时 - 不用
clip-path或mask替代——它们不兼容 IE 和部分老安卓 WebView，且增加重绘开销
路径和缓存问题比想象中更敏感
雪碧图是一个高频复用资源，但它的 URL 一旦写错或变动，所有图标都会集体消失，而且浏览器可能长期缓存旧版本，导致改了图却看不到效果。
-
background-image: url(./img/sprite.png)中的路径必须相对于 CSS 文件位置，不是 HTML；常见错误是写成相对于页面根目录却忘了加/ - 上线前务必检查生成的雪碧图文件是否真被部署，有时构建工具漏拷贝或 CDN 未刷新
- 开发时可临时加时间戳强制刷新：
url(./img/sprite.png?v=20260518)，但上线要删掉，避免破坏缓存 - 如果用 Webpack 等工具自动生成，确保
public目录或输出路径与 CSS 中引用路径一致
真正麻烦的从来不是怎么写那几行 CSS，而是图的尺寸、排列逻辑、构建流程、缓存策略这四者咬合不上——哪怕只错一个像素的 background-position，或雪碧图里两个图标贴太近，都会让整套方案在线上变成不可调试的黑盒。
