必须显式写 background-repeat: repeat，同时确保元素有宽高、路径正确、没被其他样式覆盖——缺一不可。
必须显式写 background-repeat: repeat，同时确保元素有宽高、路径正确、没被其他样式覆盖——缺一不可。
为什么写了 background-image 却不平铺？
浏览器默认确实会平铺，但项目里常有全局重置（比如 * { background-repeat: no-repeat; }）或框架样式把 repeat 覆盖掉。别赌默认值，background-repeat 必须显式声明。
- 只写
background-image: url('tile.png');→ 很可能不平铺 - 必须加
background-repeat: repeat;或简写中包含它 - 检查开发者工具的 Computed 样式，确认
background-repeat实际值是不是repeat
元素没高度，平铺就“看不见”
div、table、td 这类元素内容为空时高度为 0，背景区域实际不存在，再怎么设 repeat 都白搭。
- 给容器加
min-height: 40px;（表格单元格常用）或height: 100px; - 对
body建议用min-height: 100vh;+margin: 0; -
table上设平铺，得避开border-collapse: collapse后无padding导致视觉“挤没”的情况
repeat-x 横向平铺总只显示一行？
background-repeat: repeat-x 只在 X 轴复制，Y 方向完全不重复——如果容器高度远大于图片本身，就会出现“一行图 + 大片空白”。
立即学习“前端免费学习笔记（深入）”；
- 配合
min-height控制整体高度，比如min-height: 100vh; - 用
background-size: auto;保持原始像素尺寸，避免拉伸变形 - 起始位置建议加
background-position: top left;，防止接缝错位 - 内联样式写法示例：
style="background-image: url('stripe.png'); background-repeat: repeat-x; background-position: top left; min-height: 60px;"
小纹理图平铺失真或露白？
不是所有图都适合平铺。8×8 像素的噪点、线条图能无缝拼接；大图或边缘不对齐的图一平铺就露馅。
- 设计阶段确保左右/上下边缘像素一致，才能视觉无缝
- CSS 中优先用
background-size: auto;（默认值），让浏览器按原图尺寸铺 - 需要调密度时改
background-size: 24px auto;（横向单块宽 24px，纵向不变） - 慎用
background-size: cover或contain—— 它们会直接禁用平铺
真正卡住人的从来不是属性名记不住，而是 computed styles 里看到 background-repeat: no-repeat 却找不到哪行 CSS 覆盖了它，或者 background-image 路径明明对却加载失败——先开开发者工具，盯住那两行值，比猜快得多。
