background-repeat 无效的首要原因是 background-image 未生效，需检查路径、404、简写覆盖、多背景图值顺序匹配及伪元素尺寸等问题。
background-repeat 值写对了但没效果？先查 background-image 是否为空
很多情况下 background-repeat 看似不生效，其实根本原因是 background-image 没设置成功——比如路径错误、404、或被其他样式覆盖。浏览器不会报错，但会静默降级为纯色背景，此时重复行为自然无从谈起。
- 用浏览器开发者工具的 Computed 面板检查
background-image计算值是否为none - 确保图片路径是相对当前 CSS 文件位置，不是 HTML 页面位置（尤其使用
@import或构建工具时） - 如果用了
background简写属性，它会重置所有子属性，包括background-repeat—— 例如background: url(./img.png) #fff;会让background-repeat回退到默认值repeat，但你可能期望的是no-repeat
background-repeat: no-repeat 却还是平铺？注意 background-size 和 background-position 干扰
background-repeat: no-repeat 只控制“是否重复”，不控制“是否填满”。如果图片尺寸远小于容器，又没配好 background-size 或 background-position，视觉上容易误判为“还在重复”。
-
background-size: cover或contain会拉伸/缩放图片，可能掩盖重复痕迹；若想保留原图并居中显示，应显式写：background-repeat: no-repeat;
background-size: auto;
background-position: center; - 当
background-position设为百分比或像素值（如50px 100px），且图片尺寸小，容易让边缘留白，看起来像“只显示一次”，实则只是没触发重复区域——可临时加background-color: #eee辅助观察背景色是否透出
多背景图下 background-repeat 不起作用？每个图层要单独声明
CSS 支持逗号分隔的多背景图，但 background-repeat 也必须按相同顺序、用逗号分隔对应值，否则会按规则截断或重复填充。
- 错误写法：
background-image: url(a.png), url(b.png);
→ 实际等价于
background-repeat: no-repeat;background-repeat: no-repeat, repeat（第二个图层默认repeat） - 正确写法：
background-image: url(a.png), url(b.png);
background-repeat: no-repeat, no-repeat; - 也可用简写一次性定义：
background: url(a.png) no-repeat, url(b.png) repeat-x;
，但注意顺序和数量必须严格匹配
伪元素或 SVG 背景图中 background-repeat 失效？检查 content 属性与 viewBox
给 ::before/::after 设置背景时，若元素本身没有尺寸（width/height 为 0）或未触发 BFC，背景将无处渲染；SVG 作为背景图时，viewBox 和 preserveAspectRatio 会影响缩放逻辑，间接干扰重复表现。
立即学习“前端免费学习笔记（深入）”；
- 伪元素务必设
display: block+ 显式宽高，或用content: ""配合position: absolute定位 - SVG 背景建议内联 base64 编码，并确认其
viewBox宽高比与background-size匹配，否则no-repeat可能因缩放失真而显得“模糊重复” - 避免在 SVG 中使用
width/height属性（应只用viewBox），否则 CSS 的background-size可能无法按预期缩放
background-repeat 都没用。 
