必须显式声明background-repeat，因全局重置或框架样式常覆盖默认repeat；容器需有明确宽高（如min-height:100vh）才能显示平铺效果；路径须相对于css文件位置，network面板查404可快速定位加载失败。
background-repeat 必须显式写，别信默认值
浏览器虽把 repeat 设为默认值，但项目里几乎必然有全局重置（比如 * { background-repeat: no-repeat; }）或框架样式覆盖它。只写 background-image 而不声明 background-repeat，实际效果大概率是 no-repeat。
正确做法是：无论用单独属性还是简写，repeat、repeat-x 或 repeat-y 必须出现且位置准确：
-
background: url('tile.png') repeat;✅（repeat紧跟url()后） -
background: url('tile.png') top left repeat;❌（repeat被top left隔开，被忽略） -
background-image: url('tile.png'); background-repeat: repeat;✅（分离写法最稳妥）
容器没高度，平铺就“不存在”
div、table、td 这类元素内容为空时，高度塌陷为 0，背景区域实际为 0×0——再怎么设 repeat 都看不见。
常见场景和解法：
-
body上平铺：必须加min-height: 100vh;和margin: 0;，否则默认外边距会把背景挤出视口 -
table或td上平铺：设min-height: 40px;或height: 40px;，避免border-collapse: collapse导致视觉上“没空间” - 空
div平铺：显式写width和height，或用padding撑开尺寸
repeat-x 只铺一行？那是 height 没控住
background-repeat: repeat-x 只在 X 轴复制，Y 方向完全不重复。如果容器 height 是 auto 且无内容，它可能只高几像素；如果 height 很大（比如 100vh），就会出现“顶部一条图 + 下面大片空白”。
可靠做法：
- 配
min-height: 60px;或固定height，让视觉密度可控 - 加
background-size: auto;保持原始像素尺寸，避免拉伸变形 - 起始位置统一用
background-position: top left;，防止接缝错位 - 内联样式示例：
style="background-image: url('stripe.png'); background-repeat: repeat-x; background-position: top left; min-height: 60px;"
路径对、computed 值对，图还是不显示？先查 404
开发者工具里看到 background-repeat: repeat 和 background-image 路径都对，但图不加载——八成是路径 404。关键点：
- CSS 写在
<style></style>里：路径以index.html所在目录为基准 - CSS 在外部文件（如
css/style.css）：路径以该 CSS 文件位置为基准，不是 HTML - 绝对路径别用
file://，现代浏览器会拦截 - 多背景时，每层的
repeat必须一一对应：background: url('a.png') repeat, url('b.png') no-repeat center;
真正卡住人的，从来不是记不住属性名，而是 computed styles 里明明写着 repeat，图片却黑着——这时候盯住 Network 面板看是不是 404，比翻十遍 CSS 快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
