background-repeat: no-repeat 未生效主因是被 background 简写覆盖、多背景未配对声明、容器塌陷或移动端内核解析异常；需显式写全简写、拆分独立属性、检查容器尺寸及 background-size 干扰。
background-repeat: no-repeat 为什么有时没效果
直接写 background-repeat: no-repeat 却仍看到图片重复，大概率不是属性失效，而是被覆盖或误用。常见原因包括：
- 用了
background简写但漏写了no-repeat，比如background: url(bg.jpg) center / cover;—— 这会把background-repeat重置为默认的repeat - 多背景语法中只写了一个
no-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 和微信 X5 内核的 no-repeat 坑点
iOS Safari 和微信 Android（X5 内核）对 background 简写的解析更敏感，no-repeat 容易丢失。
- 避免换行和多余空格：写成
background:url(bg.jpg) no-repeat center/cover;（紧凑单行），而不是background: url(bg.jpg) no-repeat center / cover; - X5 内核可能忽略带空格的简写值，尤其当
/前后有空格时 - 最稳方案是拆开写：
background-image、background-repeat、background-position、background-size四个独立声明，不依赖简写顺序 - 在
position: fixed或flex容器中，iOS 15.4 之前偶现cover + no-repeat渲染异常（边缘像素重复采样），可临时改用background-size: contain验证是否真重复
no-repeat 和 background-size 的关系必须分清
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 不适用，得换思路：
- 用
background-repeat: space：图像完整保留，自动加间距填满，边缘不留白；但 IE8 不支持，需降级为repeat - 用
background-repeat: round：图像缩放适配数量，填满无间隙；同样 IE8 不支持 - 稳妥写法是先写兼容层：
background-repeat: repeat;，再覆盖现代层：background-repeat: space;，或用@supports (background-repeat: space)包裹增强逻辑 - 若要精确控制单图尺寸，必须配合
background-size，例如background-size: 32px 32px;，否则space或round的行为不可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
