background-repeat: repeat-x 无效的最常见原因是元素高度为0，需设置min-height确保垂直空间，同时注意路径基准、样式覆盖及简写顺序。
用 background-repeat: repeat-x 就能实现横向平铺，但不设容器高度或路径写错，图根本不会动——不是代码没生效，是它压根没地方可铺。
为什么 background-repeat: repeat-x 有时像没写一样
最常见原因是元素实际渲染高度为 0。比如只给 body 设了 background-image 和 repeat-x，但页面空或内容极短，body 高度就只有几像素，横向平铺只在那一行发生，肉眼看不见。
- 必须加
min-height: 100vh（对视口）或min-height: 100%（对文档流），确保有足够垂直空间供图像“铺开” - 别忘了清除浏览器默认
margin：body { margin: 0; }，否则背景可能被挤出可视区 - 如果用了 CSS 重置（如
* { background-repeat: no-repeat; }），repeat-x会被覆盖——必须显式写，不能依赖默认
background-image 路径到底以谁为基准
路径解析完全取决于 CSS 写在哪，不是看 index.html 在哪。
- CSS 写在
<style></style>标签里 → 路径相对index.html所在目录：url("img/tile.png") - CSS 在外部文件
css/style.css中 → 路径相对style.css位置：url("../img/tile.png") - 绝对路径别用
file://或盘符，现代浏览器会直接拒绝加载 - 控制台没报 404 ≠ 图片一定加载成功，也可能是路径对但服务器没配 MIME 类型，或图片本身损坏
用 background 简写时最容易踩的顺序坑
简写看着省事，但顺序错一个字符，整条规则可能被浏览器静默忽略。
- 正确顺序必须是：
background: url("tile.png") repeat-x top left / auto;（image → repeat → position → / → size） -
repeat-x必须紧跟url()后面，不能插在top left后面 - 多层背景时，每个图的
repeat值要一一对应：background: url("a.png") repeat-x, url("b.png") repeat-y; - 一旦用了
background-size: cover或100% 100%，repeat自动失效——缩放和重复互斥
真正难的不是写对那行 repeat-x，而是确认容器有高度、路径可解析、样式没被覆盖。三者缺一，横向平铺就只是个幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
