background-repeat 的合法值有 repeat、no-repeat、repeat-x、repeat-y、space、round 六个；其中 space 和 round 为 css3 新增，ie9+ 支持。
background-repeat 的合法值有哪些
它只接受几个固定关键字，不是任意字符串都能用。写错值会退化成默认的 repeat，但浏览器控制台通常不报错，容易误以为生效了。
-
repeat：横向纵向都平铺（默认行为） -
no-repeat：完全不平铺，只显示一张图 -
repeat-x：只横向平铺 -
repeat-y：只纵向平铺 -
space：平铺但留等距间隙，边缘对齐容器 -
round：缩放图片以填满容器，可能拉伸或压缩
space 和 round 是 CSS3 新增的，IE 仅从 9 开始支持，老项目要留意兼容性。
想让背景图铺满整个容器又不变形，该选哪个值
单靠 background-repeat 做不到“铺满且不变形”——它只管重复逻辑，不管缩放。真正起作用的是 background-size。
- 要铺满且裁剪多余部分：
background-size: cover - 要铺满且保留完整图像：
background-size: contain - 要强制拉伸填充：
background-size: 100% 100%（会变形）
常见错误是以为设了 no-repeat 再加宽高就能撑满，结果图太小，留白严重。这时候得配合 background-size，而不是调 background-repeat。
background-repeat: space 在实际中为什么常失效
它对图像尺寸和容器尺寸有隐含要求：只有当单张图宽高都小于容器时，才会真正产生间隙；否则会退回到类似 repeat 的行为。
- 如果图比容器宽或高，
space会自动降级为repeat - 它不会缩放图片，所以必须确保原图尺寸合理
- 和
background-position联用时，间隙分布可能不符合直觉（比如居中后左右间隙不等）
调试时可以先用 border: 1px solid red 包裹容器，观察图是否真的被“隔开”，避免凭感觉判断。
和 background-size 搭配使用的典型组合
这两个属性经常一起出现，但顺序和取值相互制约。例如：
-
background-repeat: no-repeat; background-size: cover;→ 单张图覆盖全容器，居中显示，可能裁剪 -
background-repeat: repeat; background-size: 20px 20px;→ 强制每张图缩到 20×20 再平铺 -
background-repeat: round; background-size: auto;→ 浏览器自动缩放图以整数倍铺满，适合图标网格
注意：background-size: auto 配合 round 或 space 才有意义；设成具体像素后，round 就基本没效果了。
最容易被忽略的是：background-repeat 对 SVG 或渐变背景也生效，但表现可能和位图不同——比如 linear-gradient 设 no-repeat 是合理的，但设 space 就毫无意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
