background-repeat: no-repeat 能阻止重复，但常因多背景未配对声明、background简写覆盖、容器塌陷、移动端兼容性或混淆background-size作用而失效；需显式配对多背景repeat值、拆分独立声明、确保容器有高度、区分no-repeat（控重复）与background-size（控缩放）。
background-repeat: no-repeat 能阻止重复，但多数人设了还看到“重复”，其实是被多背景、简写覆盖、容器塌陷或 background-size 干扰了判断。
为什么写了 no-repeat 还在重复？
最常见原因是误用了多背景语法：background-image: url(a.png), url(b.png) 后只写了一句 background-repeat: no-repeat——浏览器会把 no-repeat 同时应用到两张图，但如果你第二张图本意是 repeat-x，就必须显式写全：background-repeat: no-repeat, repeat-x。
另一个高频坑是用了 background 简写却漏掉 no-repeat：background: url(bg.jpg) center / cover; 看似完整，其实省略了 no-repeat，而简写会把 background-repeat 重置为默认的 repeat。
- 检查 computed style 中
background-repeat的最终值，别只信源码 - SVG 或 base64 图片 URL 里漏引号、拼错
no-repeat（比如写成no-repeate）也会失效 - 父容器高度为
0px（比如子元素全浮动没清除），背景渲染区域极小，视觉上像“密集重复”，实为塌陷后窄缝里反复平铺
no-repeat 和 background-size 是两回事
no-repeat 只控制“是否复制图像”，不控制“图像怎么缩放”。很多人以为设了它就自动“铺满”，其实是混淆了 background-size 的作用：
-
no-repeat（无background-size）：图片保持原始尺寸，只显示一次，默认位置左上角，其余留白 -
no-repeat+background-size: cover：图不重复，等比缩放填满容器（可能裁剪） -
no-repeat+background-size: 100% 100%：图不重复，但强制拉伸变形 -
no-repeat+background-size: 200px 100px：图不重复，且固定为指定像素尺寸
兼容性差的场景怎么稳住？
iOS Safari 和微信 Android（X5 内核）对 background 简写解析更敏感，no-repeat 容易丢失：
- 优先拆成独立声明：
background-image、background-repeat、background-position、background-size分开写，不依赖简写顺序 - X5 内核可能忽略带空格的简写值，尤其
/前后有空格时；建议写成紧凑单行：background:url(bg.jpg) no-repeat center/cover; - iOS 15.4 之前，在
position: fixed或 flex 容器中偶现cover+no-repeat渲染异常（边缘像素重复采样），可临时改用background-size: contain验证是否真重复 - 实在不行，改用伪元素方案：
::before+content: ""+ 绝对定位，控制力更强，也绕过元素背景的兼容性坑
真正需要“不重复但均匀铺满”怎么办？
如果目标不是“只显示一次”，而是“一张图不重复、又刚好填满整个区域不留白也不拉伸”，no-repeat 加 background-size: cover 或 contain 是标准解法。但要注意：cover 可能裁剪，contain 可能留白。若需严格控制比例+无缝填充，得换思路——比如用 SVG pattern、CSS repeating-linear-gradient 模拟纹理，或服务端生成适配尺寸的图。
最容易被忽略的是：多背景下每个图的 repeat 行为必须单独声明，不能靠“默认继承”；以及，no-repeat 不解决容器塌陷问题，该清浮动还得清，该设高度还得设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
