background-repeat支持单向重复，repeat-x实现水平平铺且垂直不重复，repeat-y实现垂直平铺且水平不重复；二者等价于双值写法repeat no-repeat和no-repeat repeat，但需注意容器尺寸、background-size缩放及浏览器兼容性影响实际效果。
background-repeat 支持单向重复，但语法容易误解
它完全能单独控制水平或垂直重复——repeat-x 和 repeat-y 就是为此设计的。问题常出在写法混淆或浏览器 fallback 行为上。
-
repeat-x= 水平方向重复 + 垂直方向 不重复（等价于repeat no-repeat） -
repeat-y= 垂直方向重复 + 水平方向 不重复（等价于no-repeat repeat） - 如果写了
background-repeat: repeat-x repeat-y，实际会退化为repeat，因为两个方向都设了 repeat - 旧版 Safari 或某些 Android WebView 对双值语法支持不稳定，建议优先用单关键字值（
repeat-x）而非双值写法
元素没高度时，repeat-x / repeat-y 看起来“失效”
这是最常被当成“无法单向重复”的假象：图片确实在 X 方向重复了，但容器高度是 0，结果只渲染出一条像素线，肉眼不可见。
- 检查元素实际渲染尺寸：打开 DevTools → 选中元素 → 看 Styles 面板右上角的 layout box，确认 height 不为 0
- 常见诱因：
div为空且未设height/min-height；父容器display: flex但子项未设align-self导致塌陷；使用了float未清除 - 快速验证：临时加
border: 1px solid red，看边框是否出现 —— 没边框 = 没渲染空间，和repeat-x无关
background-size 缩放后，repeat-x 的切片基准变了
repeat-x 不按原图尺寸切片，而是按 background-size 计算后的尺寸来重复。若缩放比例不整除容器宽度，会导致最后一块图被截断或留白，误以为“没重复满”。
- 例如：原图宽 20px，设
background-size: 30px，容器宽 100px → 实际重复 3 次（90px），剩 10px 空白 - 想严格铺满又保持比例？改用
background-size: auto 100%+repeat-x，让高度拉满、宽度按比例自动计算 - 注意：
background-size: contain或cover与repeat-x组合通常无意义，因为前者已强制单张填满
space/round 在单向控制时行为反直觉
这两个 CSS Level 4 值虽支持双值写法（如 space no-repeat），但实际表现常偏离预期，尤其在垂直方向控制上。
-
space要求图像完整显示且首尾贴边，若容器高度不能被缩放后图像高度整除，整个垂直方向可能直接不渲染任何重复 —— 看起来像“没生效” -
round会强制缩放图像以填满，但仅对指定方向生效；写成round no-repeat时，水平 round 缩放后，垂直仍按原图高度居中，极易溢出或错位 - 生产环境建议避开单向
space/round，用repeat-x+background-size: 100% auto更可控
真正难的是让单向重复在各种缩放、DPR、动态尺寸下稳定呈现——repeat-x 本身没问题，但它的效果强依赖容器尺寸、背景定位和缩放策略的配合，漏掉任一环都会让“看起来没重复”变成常态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
