默认值是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 无关，得从图片本身入手：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 确保背景图是无缝贴图（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 相关属性，只留 background-image 和 background-repeat，再逐步加回来。