background-repeat合法值有repeat、no-repeat、repeat-x、repeat-y四个基础值，CSS3新增space和round但兼容性差；必须配合background-image使用，简写background会重置为repeat。
background-repeat 的可选值有哪些
直接用 background-repeat 控制平铺方式，合法值就四个：repeat、no-repeat、repeat-x、repeat-y。CSS3 新增了 space 和 round，但兼容性要注意——IE 完全不支持，Safari 15.4+ 才开始稳定支持 space。
日常开发中真正能放心用的还是前四个。比如按钮背景图不想拉伸又怕切图不准，no-repeat 是最安全的选择；而做横条纹底纹，repeat-x 比写渐变或 SVG 更轻量。
inline style 里怎么写 background-repeat
在 HTML 的 style 属性里写，必须用连字符格式，不能写成驼峰（比如 backgroundRepeat 是错的），也不能漏掉 background- 前缀。
常见错误示例：
<div style="background-repeat: no-repeat; background-image: url(./tile.png)"></div>
-
background-repeat必须和background-image同时存在，否则无效（浏览器不会报错，但没效果） - 路径里的
./tile.png如果是相对路径，在 inline style 中仍以当前 HTML 文件为基准，不是 CSS 文件位置 - 不要写
background-repeat: none—— 这是无效值，正确写法只有no-repeat
用 background 简写属性时 repeat 会被覆盖吗
会。只要用了 background 简写，里面没显式写出 repeat 值，就会重置为默认的 repeat。
比如：
<div style="background: url(./bg.png) #fff;"></div>
这行实际等价于 background-repeat: repeat，哪怕你之前在外部样式表写了 no-repeat，也会被覆盖。
解决办法只有两个：
- 改用完整简写：
background: url(./bg.png) no-repeat #fff; - 拆开写：
background-image+background-repeat，避免触发简写的重置逻辑
repeat-x 在高 DPR 屏幕上容易糊？
不是 repeat-x 的问题，是图片本身分辨率不够。当 background-size 没设，浏览器按原始尺寸渲染，1px 高的横条纹图在 2x 屏上会被拉伸到 2px，出现模糊或锯齿。
稳妥做法是配合 background-size 显式控制缩放：
<div style="background: url(./line.png) repeat-x; background-size: auto 1px;"></div>
注意点：
-
auto 1px表示宽度保持原图比例，高度强制为 1px，这样在任意 DPR 下都清晰 - 如果图是矢量（SVG），直接设
background-size: 100% 1px更稳，避免 SVG 内部单位换算出偏差 - 别依赖
image-rendering: pixelated，它对 background-image 支持极差，Chrome/Firefox 基本不生效
background-size 的配套设置。这两处不处理，视觉问题往往要等到测试阶段才暴露。 
