background-repeat: no-repeat 失效主因是被 background 简写覆盖、多背景未配对声明、容器塌陷或 background-size 干扰；它仅控制是否复制图像，与缩放无关。
background-repeat: no-repeat 能阻止重复，但常因简写覆盖、多背景未配对、容器塌陷或 background-size 干扰而“看似失效”——它只管“复制”，不管“缩放”或“显示区域”。
为什么写了 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同时用在两张图上；若第二张图需水平铺开，必须写全：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（无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: repeat配合合适的background-size（如24px 24px） - 或用 CSS
mask-image+linear-gradient模拟可控网格，避免依赖图片平铺 - SVG 作为
background-image时更可控，可内联定义 viewBox 和preserveAspectRatio，减少缩放歧义
最易被忽略的点：检查是否真有背景图加载成功——404 时浏览器可能 fallback 到纯色背景，让你误判 no-repeat 失效；打开 DevTools 的 Network 面板确认图片状态码是 200。
