background-repeat: no-repeat没效果主因是被background简写覆盖、多背景未配对声明、容器塌陷、移动端内核解析异常或图片404；它仅控制是否复制图像，与缩放无关。
background-repeat: no-repeat 为什么没效果
写了 background-repeat: no-repeat 还在重复，大概率不是属性失效，而是被覆盖或误用。常见情况包括：
- 用了
background简写但漏掉no-repeat，比如background: url(bg.jpg) center / cover;—— 这会把background-repeat重置为默认的repeat - 多背景语法中只写了一个值：
background-image: url(a.png), url(b.png); background-repeat: no-repeat;，浏览器会把no-repeat同时应用到两张图；若第二张图需repeat-x，必须写全：background-repeat: no-repeat, repeat-x; - 父容器高度为
0px（如子元素全浮动未清除），导致背景渲染区域极小，视觉上像“密集重复”，实为塌陷后在窄缝里反复平铺 - iOS Safari 或微信 X5 内核对空格敏感：写成
background: url(bg.jpg) no-repeat center / cover;（/ 前后有空格）可能丢掉no-repeat；紧凑写法background:url(bg.jpg) no-repeat center/cover;更稳
background-size 和 no-repeat 的关系必须分清
no-repeat 只控制“是否复制图像”，跟“图像怎么缩放”完全无关。很多人以为设了 no-repeat 就能“铺满”，其实是混淆了 background-size 的作用：
- 纯
no-repeat（无background-size）：图片保持原始尺寸，只显示一次，默认位置0 0，其余区域留白 -
no-repeat+background-size: cover：图不重复，但等比缩放填满容器（可能裁剪） -
no-repeat+background-size: 100% 100%：图不重复，但强制拉伸变形填满 -
no-repeat+background-size: 200px 100px：图不重复，且固定为指定像素尺寸
移动端 no-repeat 失效怎么办
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-repeat: repeat配合合适的background-size（如24px 24px） - 用
mask-image+linear-gradient模拟可控网格，避免依赖图片平铺 - SVG 作为
background-image更可控，可内联定义viewBox和preserveAspectRatio，减少缩放歧义 - 别忘了检查图片是否真加载成功——404 时浏览器 fallback 到纯色背景，会让你误判
no-repeat失效；打开 DevTools 的 Network 面板确认状态码是200
background-repeat 没起作用，而是它被简写重置、被多背景规则覆盖、或者根本没生效于你认为的那个元素上。调试时先看 Computed 面板里 background-repeat 的最终计算值，再往上一层层查来源。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
