如何设置HTML页面背景图片及其平铺定位技巧详解？

本文共计870个文字，预计阅读时间需要4分钟。

背景图片不平齐，90%并非代码写错，而是容器没有高度、路径错位或被重置样式覆盖。

background-repeat 必须显式写，别信“默认会平铺”

虽然 background-repeat: repeat 是默认值，但项目里常有全局重置（比如 * { background-repeat: no-repeat; }）或 CSS 框架（如 Normalize.css）悄悄改掉它。不写就等于裸奔。

• 始终显式声明：background-repeat: repeat;（双向）、repeat-x;（仅横向）、repeat-y;（仅纵向）
• 想做横向条纹？用 repeat-x 后，必须给容器加 min-height: 100vh;，否则只显示一行高，图就“没了”
• no-repeat 和 repeat 不能混用在一个元素上——CSS 不支持“部分平铺”

路径和容器高度是两大高频失效点

控制台没报 404，图也不显示？大概率是路径相对于 CSS 文件位置错了，或者 body 高度为 0。