background-repeat 默认 repeat 易破坏设计，需按需选用 no-repeat、repeat-x/y、space 或 round；与 background-size 协同时逻辑独立；伪元素须设 content 才生效。
background-repeat 值选错导致背景只显示一次或溢出
默认情况下 background-repeat 是 repeat，但很多场景下它反而会破坏设计——比如用小图标做装饰背景时铺满整个容器，或者渐变背景被意外重复。真正要“只显示一次”，得明确写 no-repeat；想只横向铺开，就得用 repeat-x（注意不是 repeat-x 的拼写错误，是带短横线的）。
-
repeat：默认值，横纵都重复，容易让纹理图变得杂乱 -
no-repeat：常用于 logo、头像、单张 banner 背景，必须显式声明才可靠 -
repeat-x/repeat-y：适合水平条纹、垂直分割线类背景，注意旧版 Safari 对repeat-y在 flex 容器中有渲染异常 -
space和round是 CSS3 新增值，前者留空隙均匀分布，后者缩放图片适配，但 IE 完全不支持，移动端 Android 4.3 及以下也有兼容问题
background-repeat 和 background-size 一起用时顺序不重要，但逻辑要分清
background-repeat 控制“怎么铺”，background-size 控制“铺之前每份图多大”。二者没有先后执行关系，但人容易误以为先缩放再平铺——其实浏览器是按规范同时计算：先根据 background-size 确定单个图块尺寸，再用 background-repeat 决定铺几块、怎么排。
- 设
background-size: 20px 20px; background-repeat: repeat;，就是把原图压成 20×20 后无限铺 - 设
background-size: contain; background-repeat: no-repeat;，此时contain已确保整图可见，no-repeat是冗余的（但保留无害） - 设
background-size: cover; background-repeat: repeat;，行为未定义——cover本意是填满容器且不露白，和repeat冲突，Chrome 会静默降级为no-repeat，Firefox 可能报 warning
用 background-repeat: space 时，图块间距不受 margin/padding 影响
space 模式会在图块间自动插入等宽空白，这个空白是背景绘制的一部分，不是元素盒模型里的空间。所以给元素加 padding 或 margin 不会影响图块之间的间隙大小，但会改变第一块和最后一块离边界的距离。
- 图块本身不会被拉伸，只调整间距；如果容器宽度不能被图块宽度整除，多余空间平均分到所有间隙中
-
space在高度方向上同样生效，但若容器高度不够放两行，就退化为no-repeat（仅显示一行居中） - 别指望用
space做响应式网格背景——它不响应子元素变化，只响应自身容器尺寸
background-repeat 在伪元素里失效？检查是否漏了 content
::before 或 ::after 要显示背景，前提是必须有 content 属性（哪怕只是 content: ""）。否则伪元素不生成渲染盒，background-repeat 再对也没用，DevTools 里都看不到该伪元素的背景面板。
立即学习“前端免费学习笔记（深入）”；
- 常见错误写法：
div::after { background-image: url(x.png); background-repeat: repeat-x; }—— 缺content，背景不出现 - 正确写法：
div::after { content: ""; display: block; background-image: url(x.png); background-repeat: repeat-x; } - 如果用了
display: none，背景也会消失；用visibility: hidden则背景仍在（只是不可见）
background-repeat 和 background-attachment 的组合效果——比如固定背景 + 平铺，在滚动时可能出现图块错位，尤其在 retina 屏或 zoom 非 100% 时。这时候得配合 background-position 微调起点，而不是硬改 repeat 值。 
