background-repeat 默认值是 repeat，即横向纵向均平铺；使用 background 简写时若未显式声明 no-repeat，仍会启用重复；cover/contain 不影响重复逻辑，全屏无重叠需同时满足 no-repeat、center 和 cover。
background-repeat 默认值是什么
浏览器对 background-repeat 的默认行为是 repeat，也就是横向纵向都平铺。哪怕你没写这行 CSS，只要用了 background-image，图片就会重复出现——这是很多人以为“没设置却铺满”的根源。
用 background-repeat: no-repeat 关掉重复
最直接的办法就是显式声明不重复。注意它只影响当前这个背景图，不影响其他背景层（比如多背景时要逐个控制）。
-
no-repeat：完全不重复，图片只显示一次（默认居左上角） -
repeat-x：只横向重复 -
repeat-y：只纵向重复 -
repeat：默认值，横纵都重复
div {
background-image: url("bg.jpg");
background-repeat: no-repeat;
}background-repeat 和 background 简写属性的冲突
如果你用 background 简写（比如 background: url(bg.jpg) #fff;），里面没提 repeat，浏览器会把 repeat 设为默认值——也就是又开启重复了。这是最常踩的坑。
- 简写中必须显式带上
no-repeat才能关掉重复 - 顺序不能错：
background: url(bg.jpg) no-repeat center/cover #fff; - 漏掉
no-repeat，哪怕写了center或cover，重复依然生效
/* ❌ 这样还是 repeat */
div { background: url(bg.jpg) #fff; }
/ ✅ 必须写清楚 no-repeat /
div { background: url(bg.jpg) no-repeat center/cover #fff; }
background-size: cover / contain 会影响重复判断吗
不会。background-size 控制的是单张图的缩放，而 background-repeat 控制的是“要不要画第二张”。即使设了 cover，如果容器比图片大很多、又没关重复，浏览器仍可能在边缘补一张压缩变形的图（尤其当 background-repeat 是默认值时）。
立即学习“前端免费学习笔记（深入）”；
-
cover+no-repeat：图等比放大填满容器，多余部分裁剪，只显示一张 -
cover+repeat：先放大到覆盖全容器，再以这个放大后的尺寸去平铺——结果往往是一堆模糊碎图 - 真正想全屏无重叠，三个条件缺一不可：
no-repeat+center+cover
关重复这事看起来简单，但实际项目里经常因为简写遗漏、CSS 层叠覆盖、或和 background-position 混用而失效。最稳的方式：单独写 background-repeat: no-repeat，别依赖简写，也别假设浏览器会“猜你想要什么”。
