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 在哪。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• CSS 写在 <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，而是确认容器有高度、路径可解析、样式没被覆盖。三者缺一，横向平铺就只是个幻觉。