background-repeat合法值包括repeat、no-repeat、repeat-x、repeat-y及双值写法如repeat no-repeat；space、round等需成对使用且配合background-size和确定容器尺寸才生效。
background-repeat 的合法值有哪些
background-repeat 只接受有限的几个关键字组合，不是所有排列都有效。常见合法值包括：repeat、no-repeat、repeat-x、repeat-y，以及 CSS3 新增的双值写法如 repeat no-repeat（横向重复 + 纵向不重复）。
注意：像 no-repeat repeat 这种顺序反了的写法在部分旧浏览器中可能被忽略；双值写法必须是「水平方向 垂直方向」顺序，不能颠倒。
-
repeat：默认行为，横纵都重复 -
no-repeat：完全不重复，只显示一次背景图 -
repeat-x：仅水平方向重复（等价于repeat no-repeat） -
repeat-y：仅垂直方向重复（等价于no-repeat repeat）
为什么 background-repeat: space 不生效
你写了 background-repeat: space 却没看到平铺间隙效果？大概率是因为没配对使用 background-size 或容器尺寸不匹配。
space 和 round 是 CSS3 新增的重复模式，它们会自动缩放背景图以实现均匀分布或填满，但前提是：
立即学习“前端免费学习笔记（深入）”；
- 必须用双值语法指定方向，例如
space round，单写space会被当作无效值降级为repeat - 背景图本身得有明确尺寸（比如 PNG/JPG 文件自带宽高），否则浏览器无法计算缩放比例
- 父容器需有确定高度/宽度（比如设置了
height或内容撑开），否则space可能退化为repeat
简单验证方式：
div { background-image: url("dot.png"); background-repeat: space space; background-size: auto;，再给 div 加个固定 height: 200px，就能看到点阵被拉伸对齐边缘的效果。
如何让背景图在大屏下不拉伸、小屏下不裁切
单纯靠 background-repeat 解决不了缩放适配问题，它只管“怎么铺”，不管“铺多大”。真正起作用的是 background-size 与 background-repeat 的配合。
典型组合方案：
- 响应式图标条纹：用
background-size: 20px 20px+background-repeat: repeat，确保每个单元格大小固定 - 全屏封面图：用
background-size: cover+background-repeat: no-repeat，避免重复又保持比例 - 网格状装饰图：用
background-size: 64px 64px+background-repeat: repeat，比用原始图反复渲染更可控
关键点：只要指定了 background-size 的具体像素值或 contain/cover，background-repeat 就只决定这些“缩放后图块”的铺排方式，而不是原始图的铺排方式。
background-repeat 影响性能吗
几乎不影响运行时性能——它只是告诉浏览器“把这张图复制多少次贴在哪”，不触发重绘或布局计算。但间接影响可能来自图像本身：
- 用
repeat铺一张 1KB 的 2×2 像素 PNG，比铺一张 200KB 的 1024×768 JPG 节省大量内存和解码开销 - 过度依赖
space或round且背景图尺寸不规则时，浏览器需实时计算缩放比，极端情况下在低端设备上可能造成轻微绘制延迟 - 如果同时设了多个背景层（
background-image: url(a.jpg), url(b.png)），每层的background-repeat都独立解析，但总量仍可忽略
真正该警惕的是：别为了“看起来整齐”而用大图 + no-repeat + background-position: center 去模拟平铺效果，这种写法既浪费带宽，又丧失响应能力。
