移动端 background-repeat: no-repeat 不生效，主因是 background 简写重置了该属性，或 iOS Safari/X5 内核解析异常；应拆分为独立声明、避免空格、或改用伪元素方案。
background-repeat: no-repeat 在移动端不生效？检查是否被覆盖
移动端背景图仍重复，大概率不是 background-repeat 写错了，而是它被其他样式覆盖或重置了。iOS Safari 和部分安卓 WebView 会默认对 background 简写属性做隐式处理，尤其当用了 background: url(...) center / cover 这类简写时，background-repeat 会被设为 repeat（即使你没显式写）。
- 用
background简写时，所有子属性都会被重置——包括background-repeat，必须显式带上no-repeat - 检查 DevTools 的“Computed”面板，看
background-repeat最终计算值是不是repeat - 优先用独立声明：把
background-image、background-repeat、background-position拆开写，避免简写干扰
移动端 Safari 对 background-size: cover + no-repeat 的兼容细节
iOS 15.4 之前，Safari 在某些 flex 容器或 position: fixed 元素里，background-size: cover 配合 no-repeat 可能渲染异常——看起来像平铺，其实是背景图被拉伸后边缘像素重复采样，造成视觉误判。
- 不是真重复，是缩放算法导致的边缘模糊/伪重复，用
background-size: 100% 100%或contain能验证 - 加
background-attachment: scroll（默认值）可缓解，避免fixed引发的渲染路径切换 - 如果必须用
cover，建议配合background-origin: border-box明确裁剪基准
微信内置浏览器（X5内核）忽略 no-repeat？清掉 background 简写里的空格和换行
微信 Android 版（X5内核）对 CSS 解析较旧，遇到 background: url(img.png) no-repeat center / cover 中的多空格或换行，可能截断解析，导致 no-repeat 丢失。
- 把简写写成单行、紧凑格式：
background:url(img.png) no-repeat center/cover（去掉所有空格，除url()内和/前后） - 更稳妥的做法：彻底不用
background简写，改用background-image、background-repeat、background-position、background-size四个独立声明 - 注意 X5 对
background-size的cover/contain支持完好，但对auto 100%类写法容易出错
用伪元素替代 background-image 是最稳的 no-repeat 方案
当上述方法都失效（比如在 position: sticky 容器或复杂层叠场景），直接放弃元素背景，改用 ::before 伪元素 + content: "" + 绝对定位，控制力更强。
立即学习“前端免费学习笔记（深入）”；
- 伪元素默认不继承父级背景，
background-repeat不会被意外覆盖 - 示例：
.box { position: relative; } .box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; z-index: -1; } - 注意要设
z-index: -1并确保父容器有position: relative，否则伪元素可能溢出
no-repeat 就万事大吉，却没意识到它正被某处简写、某个 CSS reset、甚至微信 X5 的解析 bug 默默吃掉。真要一劳永逸，就别依赖 background 简写。 
