background-repeat是控制背景图平铺方式的核心属性，默认值为repeat（双向铺满）；常用值包括no-repeat（单次显示）、repeat-x（仅横向）、repeat-y（仅纵向）；简写background时易误重置其他子属性，需用center/cover等紧凑语法补全；调试应优先检查开发者工具中实际生效值及样式权重覆盖情况。
background-repeat 是控制平铺的核心属性
加背景图本身不难，真正决定“图怎么铺”“铺多少次”“往哪铺”的，是 background-repeat。它不是可有可无的修饰项，而是默认就起效的关键开关——没显式写，浏览器就按 repeat（横向+纵向都铺满）来执行，大图往往只显示左上角一小块，还密密麻麻重复出马赛克感。
-
no-repeat：最常用，图只出现一次，配合background-position: center和background-size: cover才能居中撑满 -
repeat-x：只横向铺，适合用作横条纹、渐变带或顶部装饰线 -
repeat-y：只纵向铺，常用于侧边栏纹理或垂直分割线 -
repeat：双向铺，默认值，慎用在大图上，小图标（如url("dot.png")）才适合
用 background 简写时，repeat 容易被悄悄覆盖
很多人写 background: url("bg.jpg") no-repeat; 就以为万事大吉，但这个写法会把 background-size、background-position 全部重置为默认值（auto），结果图不居中、不缩放、边缘留白——问题就出在这儿。
- 安全写法是补全关键子属性：
background: url("bg.jpg") no-repeat center/cover;，注意斜杠/不可省，center/cover是background-position/background-size的紧凑写法 - 如果还要加
background-attachment: fixed，就不能用简写，得拆开写，否则fixed会被覆盖掉 - 调试时直接在开发者工具里点开
background展开项，看每个子属性是否按预期生效，比猜更可靠
路径对了，repeat 还不生效？检查是否被其他样式劫持
常见现象：CSS 文件里写了 background-repeat: no-repeat，但页面上还是在平铺。大概率是选择器权重不够，或者有更高优先级的规则在后面覆盖了它。
- 打开浏览器开发者工具（F12），选中目标元素，在 Styles 面板里找
background-repeat，带删除线的说明被覆盖了 - 检查是否有全局重置样式（如某些 UI 框架的
* { background: transparent; }）影响了 body 或容器 - 确认你改的是正确的选择器：比如想设整个页面背景，必须作用于
body；若只给某个<div class="hero"> 加，就得写 <code>.hero，不能只写div - 临时加一句
!important测试是否是权重问题（仅调试用，别上线） - 测试时务必真机预览，不要只信桌面模拟器
- 对兼容性要求高的项目，避免依赖
cover+no-repeat组合，改用background-size: 100% 100%（会拉伸变形）或 JS 动态计算尺寸 - 小图平铺（如
repeat-x的分隔线）在所有设备上表现稳定，是最稳妥的平铺方案
移动端平铺行为和桌面端不一致？这是正常现象
background-attachment: fixed 在 iOS Safari 和部分安卓浏览器里被禁用或降级处理，但 background-repeat 本身不受影响。真正容易出问题的是 background-size: cover 在老 Android 浏览器里兼容性差，导致 no-repeat 下图缩放异常，看起来像“没铺好”。
立即学习“前端免费学习笔记（深入）”；
实际生效与否，不取决于你写了多少行 CSS，而在于浏览器最终计算出的那一个 background-repeat 值——它可能被简写覆盖、被权重压制、被路径失效间接干扰，也可能在某台手机上因渲染引擎差异而静默降级。
