background-repeat: repeat 是默认行为，不写也一样；常见问题多因 background-size、容器尺寸或 background-position 导致视觉上未显重复；repeat、repeat-x、repeat-y 区别在于铺放方向；Safari 对内联 SVG 有轻微兼容问题。
background-repeat: repeat 是默认行为，不写也一样
绝大多数情况下，background-repeat 根本不用显式设为 repeat——浏览器默认就是它。你写了反而多此一举，还可能掩盖真正的问题。
常见错误现象：background-image 没铺开，只显示一张图，第一反应就去加 background-repeat: repeat，结果没用。这时候真问题往往在别的地方：
-
background-size被设成了cover或contain，直接压制了重复逻辑 - 背景图本身尺寸太大，单张就撑满容器，根本没机会“重复”
- 父容器高度为
0或未触发 BFC，导致背景无处可铺
repeat 和 repeat-x / repeat-y 的实际差异在哪
三者控制方向不同，但关键不是“能不能铺”，而是“往哪铺”。repeat 是双向铺（x 和 y 都重复），repeat-x 只横向铺，repeat-y 只纵向铺。
使用场景举例：
- 做横条纹背景：用
repeat-x+ 1px 高图片，比repeat更省渲染压力 - 做侧边导航底纹：
repeat-y配合窄图，避免纵向拉伸失真 - 老式网页纹理背景：必须用
repeat，否则留白或错位
性能影响：现代浏览器对三者优化差别不大，但 repeat-x 在超长容器中可能略快——毕竟少算一维。
为什么 background-repeat: repeat 有时看起来像没生效
不是 CSS 失效，是视觉上“看不出重复”。典型原因：
- 背景图边缘没做无缝衔接，重复后出现明显接缝，人眼第一反应是“铺错了”
- 用了
background-position偏移，比如50% 50%，导致第一张图居中，周围空白，误以为没重复 -
background-attachment: fixed下，滚动时重复图案位置固定，和内容错开，显得混乱
调试建议：临时加一句 background-color: #ff0;，看清容器真实尺寸和背景绘制区域。
兼容性几乎不用操心，但要注意 Safari 对 SVG 的小异常
repeat 在所有支持 CSS2.1 的浏览器里都稳如磐石，IE8+ 全支持。唯一要注意的是 Safari（尤其是 iOS 14–16）对内联 SVG 作为背景图时，repeat 可能因 viewBox 解析偏差导致轻微偏移。
解决办法很简单：
- 把 SVG 放进文件单独引用，别用
data:URI - 确保 SVG 根元素有明确宽高，且与
viewBox比例一致 - 必要时加
background-size: 数值px 数值px锁死单图尺寸
这个坑不常踩，但一旦踩中，会花很久怀疑是不是 CSS 写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
