Bootstrap导航栏背景图默认不平铺，是因为.navbar自带background-color覆盖了图片，且常被background-repeat:no-repeat规则、图片加载失败或高度塌陷干扰；要真正平铺，须显式设background-repeat:repeat、禁用background-size:cover/contain、确保navbar有明确高度及小尺寸纹理图。
Bootstrap导航栏背景图为什么默认不平铺
因为 Bootstrap 的 .navbar 默认设置了 background-color（比如 bg-light 或 navbar-dark），而一旦你用 background-image 覆盖，浏览器会按 CSS 默认行为处理：background-repeat: repeat —— 但前提是图片尺寸小且没被其他规则覆盖。现实中，90% 的“不平铺”不是因为没触发重复，而是被以下三件事悄悄关掉了：
-
background-repeat: no-repeat被 Bootstrap 自定义样式、主题 CSS 或你自己写的全局重置规则意外继承 - 图片路径加载失败（404 或 CORS），浏览器渲染空白，看起来像“没平铺”，其实是根本没图
-
.navbar高度塌陷或被overflow: hidden截断，导致重复区域不可见
怎么让 navbar 背景图真正平铺（repeat）
必须显式声明 background-repeat，不能依赖默认值。同时要确保容器可渲染出重复区域：
- 给
.navbar加background-repeat: repeat（或repeat-x/repeat-y）—— 单写repeat会横竖都铺 - 确认图片尺寸足够小（比如 8×8 像素的纹理图），否则大图即使
repeat也看不出效果 - 移除干扰项：
background-size别设cover或contain，它们和repeat冲突；若已设，删掉 -
.navbar必须有明确高度（比如min-height: 56px）或内容撑开，否则重复区域高为 0 - 检查祖先元素（如
.container或body）是否带overflow: hidden，它会把重复溢出部分裁掉
常见错误：写了 repeat 还是只显示一张图
这不是 bug，是 CSS 渲染逻辑在起作用。典型原因：
- 你用了
background-size: 100% 100%—— 它强制拉伸单张图填满整个 navbar，自然没空间留给重复 - 图片本身是大图（如 1920×1080 banner 图），
repeat确实生效了，但每张都巨大，视觉上就是“只有一张” - 自定义 class 里写了
background-position: center center，它对重复模式无效，但可能掩盖了重复起点，让人误判 - DevTools 里看到
background-repeat: repeat是绿色勾选，但 computed 值却是no-repeat—— 说明某条更高优先级规则（比如内联 style 或第三方库）覆盖了它
推荐写法：一个可复用的平铺 navbar class
别直接改 .navbar，新建 class 更安全：
`.navbar-tile {
background-image: url("assets/img/tile-bg.png");
background-repeat: repeat;
background-position: top left;
min-height: 56px;
}`
然后在 HTML 中：<nav class="navbar navbar-expand-lg navbar-light navbar-tile">。注意：
- 路径用相对路径，确保构建后不 404；WebP 格式更小，但 IE 不支持，如需兼容可 fallback 到 PNG
- 如果只想要横向平铺（比如渐变线纹），用
background-repeat: repeat-x - 移动端小屏下平铺太密？加媒体查询：
@media (max-width: 768px) { .navbar-tile { background-image: none; } }
