显式声明 background-repeat: repeat（或 repeat-x/repeat-y）并确保路径正确、元素有宽高（如 min-height: 100vh）、避免重置样式干扰，才能实现可靠背景平铺。
直接在 body 上用 background-repeat: repeat 就能平铺，但多数人卡在路径错、没设宽高、或被全局重置样式覆盖。
background-repeat 必须显式写，别依赖默认
虽然 repeat 是默认值，但项目里常有 CSS 重置（如 * { background-repeat: no-repeat; }）或框架样式干扰。不写就可能失效。
- 始终显式声明：
background-repeat: repeat;（双向）、repeat-x（仅横向）、repeat-y（仅纵向） - 如果只想要横向条纹效果，用
repeat-x后务必确认容器有固定或最小高度（如min-height: 100vh;），否则图片可能只显示一行就“消失”了 -
no-repeat和repeat不能混用——一个元素只能有一种background-repeat值
图片路径必须相对于 CSS 文件位置
这是最常导致背景图不显示的原因。不是相对于 index.html，而是相对于你写 CSS 的地方。
- 如果 CSS 写在
<style>标签里（即内部样式表），路径以index.html所在目录为基准：background-image: url("img/bg.png"); - 如果 CSS 在外部文件
css/style.css中，路径以style.css为基准：background-image: url("../img/bg.png"); - 路径中不要用
file://或绝对磁盘路径，浏览器会拒绝加载
body 没高度时，平铺区域可能为 0
body 默认没有高度，若页面内容空或很短，background-image 实际只作用于那几像素高，根本看不出平铺效果。
立即学习“前端免费学习笔记（深入）”；
- 给
body加min-height: 100vh;，确保至少铺满视口 - 同时加
margin: 0;，避免浏览器默认外边距把背景“挤”出可视区 - 如果平铺要覆盖整个文档（含滚动内容），用
html { min-height: 100%; }+body { min-height: 100%; }更稳妥
用 background 简写时顺序和逗号不能错
想一行写完，得按 background: <image> <repeat> <position> / <size>; 顺序，且多个背景要用逗号分隔。
- 正确：
background: url("tile.png") repeat top left / auto; - 错误：
background: url("tile.png") top left repeat;（repeat必须紧挨url()后，且/前不能插其他值） - 多层背景时，每个子项的
repeat必须一一对应：background: url("a.png") repeat, url("b.png") repeat-y;
真正容易被忽略的是：平铺行为完全由 CSS 渲染引擎决定，和 HTML 结构无关；哪怕你只给 <div> 设平铺，只要它没内容、没高度、没 display，照样看不到——别猜，先开开发者工具检查 computed styles 里的 background-repeat 和 background-size 实际值。
