background-repeat 默认值是 repeat，即横向纵向均平铺；仅对 background-image 有效，常见失效原因是简写 background 覆盖、父容器无高度或路径错误。
background-repeat 默认值是什么
绝大多数人以为背景图会自动平铺，其实只对 background-image 有效——但真正起作用的是 background-repeat。它的默认值是 repeat，也就是横向纵向都重复。如果你加了图片却没看到平铺效果，大概率是父容器没高度、图片路径错，或者被其他 CSS 覆盖了（比如写了 background: url(...) no-repeat; 却忘了显式设 repeat）。
如何只横向或只纵向平铺
用 repeat-x 或 repeat-y 就行，比写两个值更直观，也更不容易出错：
div {
background-image: url("tile.png");
background-repeat: repeat-x; /* 只横着铺 */
}
-
repeat-x：适合做水平分割线、顶部渐变条、导航栏底纹 -
repeat-y：适合侧边栏纹理、垂直分隔背景 - 别用
repeat no-repeat这类混合写法——CSS 不认，会退回到默认repeat
background-repeat: space 和 round 的实际差异
space 和 round 都是为了“刚好铺满容器”，但逻辑相反：
-
space：保持图片原始尺寸，靠增加间距把图“撑开”填满；两端不留空隙，中间等距留白 -
round：压缩或拉伸图片本身，让整数张图刚好塞满，不加空隙也不裁切 - 两者都不兼容 IE，
space在 Safari 旧版本里有渲染抖动，round在 Firefox 里缩放精度偶尔失真
为什么 background-repeat 不生效
常见原因不是属性写错了，而是优先级或覆盖逻辑被忽略：
- 用了简写
background，比如background: url(...) #fff;—— 这会把background-repeat重置为repeat，即使你之前单独设过no-repeat - 父元素设置了
background-clip: padding-box且内边距为 0，视觉上像没铺开 - 图片本身是 SVG 且含
viewBox，某些浏览器会按比例缩放后影响平铺密度 - 开启了
contain: layout或content-visibility: auto，可能触发渲染优化，导致背景行为异常
最稳妥的写法是把重复方式和图片一起写在 background 里：background: url(...) repeat-x;，避免隐式重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
