默认值是repeat，即横向纵向均重复；图片未铺满主因是元素无渲染高度（如0×0）、background-size设为cover/contain导致缩放裁剪，或background-attachment:fixed引发错位。
background-repeat 默认值是什么，为什么图片没铺满？
默认情况下 background-repeat 的值是 repeat，也就是横向纵向都重复。但如果你的背景图没铺满，大概率不是这个属性的问题——而是 background-size 设为 cover 或 contain 后，图片被缩放拉伸/裁剪，导致“看起来没平铺”。repeat 和 cover 是互斥行为：一旦用了 cover，repeat 就失效了。
- 想真正平铺，必须显式设置
background-size: auto（或不设），让图片保持原始尺寸 -
background-repeat: repeat可省略，因为它是默认值 - 检查是否误写了
background-attachment: fixed，它在某些滚动场景下会让平铺区域错位
如何只横向或只纵向平铺？
用 background-repeat 的两个关键字组合就能控制方向：
-
background-repeat: repeat-x→ 只水平重复（等价于repeat no-repeat） -
background-repeat: repeat-y→ 只垂直重复（等价于no-repeat repeat） -
background-repeat: no-repeat→ 完全不重复，只显示一次 - 注意：不要写成
repeat-x: true，这是无效语法；它只能作为background-repeat的值
平铺时图片边缘有难看的接缝怎么办？
接缝本质是像素对齐问题，和 CSS 无关，得从图片本身入手：
- 确保背景图是无缝贴图（tileable）：左右边缘颜色/纹理应一致，上下同理
- 导出时关闭抗锯齿或使用“硬边缘”模式，避免半透明像素造成模糊过渡
- 如果用的是 PNG，检查是否有隐藏的 Alpha 边缘；可尝试转为无透明通道的 JPG 再测试
- CSS 层面可加
image-rendering: pixelated防止浏览器插值模糊，但仅对整数缩放有效
background-repeat 在 Flex 或 Grid 容器里失效？
不是失效，而是容器本身没高度。平铺行为依赖元素的渲染尺寸，而 Flex/Grid 子项若没设高、又没内容撑开，高度就是 0。
- 给元素设
min-height: 100vh或height: 200px等明确值 - 确认父容器没有
overflow: hidden裁剪了平铺区域 - 用开发者工具检查 computed styles，看
background-image是否真的加载成功（有时路径错导致 fallback 为纯色） - 注意：
background-repeat不继承，必须写在目标元素上，不能靠父级传递
background-image 和 background-repeat，再逐步加回来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
