17370845950

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，别依赖简写，也别假设浏览器会“猜你想要什么”。