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。

比如：

Flova

Flova是一款AI文本写作工具，全球首个一体化 AI 视频创作平台。

下载

 <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 基本不生效

实际项目里最容易忽略的是简写属性的覆盖行为，以及 DPR 场景下对 background-size 的配套设置。这两处不处理，视觉问题往往要等到测试阶段才暴露。