正确设置背景平铺需确保路径相对于CSS文件、body设min-height:100vh且清除margin、显式声明background-repeat:repeat，小图无缝衔接更实用。
直接给 body 设置 background-image 和 background-repeat: repeat 就能实现背景图片平铺，但真正起作用的关键不在“会不会写”，而在于路径、尺寸和样式干扰这三点。
确保图片路径正确
路径必须相对于 CSS 所在位置，不是 HTML 文件：
- 如果 CSS 写在
标签里（即在index.html中），路径以 HTML 所在目录为基准：background-image: url("img/tile.png"); - 如果 CSS 在外部文件
css/style.css中，路径以该 CSS 文件为基准：background-image: url("../img/tile.png"); - 绝对路径或
file://开头的本地路径浏览器会拒绝加载，一律不用
让容器有足够高度和宽度
body 默认没有高度，空页面下背景区域可能只有几像素高，根本看不到平铺效果：
- 加
min-height: 100vh;确保至少铺满当前视口 - 同时加
margin: 0;避免浏览器默认外边距把背景“挤”出可视区 - 若要覆盖整个文档（含滚动后的内容），建议双保险：
html { min-height: 100%; }body { min-height: 100%; margin: 0; }
显式声明 background-repeat 并防干扰
别依赖“默认是 repeat”——项目中常有重置样式（如 * { background-repeat: no-repeat; }）或框架悄悄覆盖它：
- 必须写明：
background-repeat: repeat;（双向）、repeat-x;（仅横向）或repeat-y;（仅纵向） - 用简写
background时顺序不能错：background: url("tile.png") repeat top left / auto;
其中repeat必须紧跟url()后，不能插在中间 - 多层背景时，每张图的
repeat值要一一对应：background: url("a.png") repeat, url("b.png") repeat-y;
小图平铺更实用，注意无缝衔接
平铺适合小纹理图（比如 16×16 的点阵、条纹、网格），好处是体积小、加载快、易复用：
- 确保图片边缘自然衔接，否则会出现明显接缝
- 横向条纹用
repeat-x时，记得设固定或最小高度，否则只显示一行就“看不见了” - 避免混用
background-size: cover或100% 100%—— 缩放和重复互斥，开了就不再平铺
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
