background-repeat: no-repeat 未生效通常因 background 简写覆盖、图片路径错误导致 404、父容器背景干扰、或与 background-size 冲突；需配合 background-position 使用并检查完整背景配置。
background-repeat: no-repeat 为什么没生效
常见现象是写了 background-repeat: no-repeat，但图片还是平铺——大概率是背景图本身被其他样式覆盖或未正确加载。优先检查是否误用了简写属性覆盖了它，比如 background 一次性设了颜色、位置、尺寸，却漏写了重复方式，浏览器就会重置为默认的 repeat。
- 用
background简写时，background-repeat必须显式写出，否则按规范会被设为repeat - 确保图片路径有效，404 时浏览器可能 fallback 到纯色背景，让你误以为“没生效”
- 如果父容器有
background，子元素又没设background-color或透明背景，可能视觉上“看不出”不重复效果
no-repeat 和 repeat-x / repeat-y 的实际区别
这三个值控制的是重复方向，不是“要不要重复”的二元开关。no-repeat 是彻底禁用重复；repeat-x 只在水平方向铺，适合做横条纹底纹；repeat-y 只在竖直方向铺，常用于侧边装饰图。
-
repeat-x下，图片高度必须小于容器高，否则多余部分留白；反之repeat-y要求宽度小于容器宽 - 若同时设了
background-size: cover或contain，repeat值会失效——因为图片已被拉伸/缩放到填满或适应容器，不再需要重复 - 在 Retina 屏上，用
repeat-x铺一张 1px 宽的渐变图，比用 CSS 渐变更兼容老浏览器
background-repeat 兼容性与现代替代方案
background-repeat 本身从 IE4 就支持，完全不用操心兼容性。真正容易出问题的是和它配合使用的属性，比如 background-size（IE9+）、background-origin（IE9+）。
- 如果目标要兼容 IE8，就别碰
background-size，也别指望no-repeat配合background-position实现“居中裁剪”效果 - 想让单张小图在大容器里只显示一次且居中，光靠
no-repeat不够，还得配background-position: center，否则默认左上角 - CSS 中没有 “repeat-n-times” 这种语法，要限制重复次数只能用伪元素 + 多背景图，或者换 SVG pattern
调试 background-repeat 的实用技巧
最直接的办法是临时加个鲜明边框和半透明背景色，把容器“显形”，再观察图片铺排逻辑是否符合预期。
立即学习“前端免费学习笔记（深入）”；
- 在 DevTools 里选中元素，右侧 Styles 面板搜索
background，看哪一行实际生效——经常是某条规则被后写的同名属性覆盖了 - 把
background-repeat单独拎出来写在最后，避免被简写覆盖：先写background: url(...) no-repeat;，再补background-position: center; - 如果用 Webpack/Vite 加载图片，注意
url(./img.png)中的路径是相对 CSS 文件，不是 HTML，路径错会导致 404，进而让no-repeat看似无效
background-repeat 的行为依赖于整个背景层的完整配置，单独改它往往不够，得连带看 background-image 是否加载、background-size 是否干预、background-position 是否偏移——这几个值拧在一起，才决定最终图怎么躺。 
