使用Bootstrap 4和HTML制作着陆页：背景图片无法隐藏于导航栏后

嘿，我来帮你搞定这个问题！通常这种情况是因为Bootstrap 4导航栏默认的背景设置或层级关系，导致背景图片没法“藏”到它下面。下面是几个针对性的解决方案：

1. 透明导航栏+背景容器向上延伸 #

如果你的导航栏不需要实色背景，先把它改成透明，再让背景图片容器向上覆盖导航栏下方区域：

导航栏代码调整 #

替换掉导航栏默认的背景类，用透明背景：

<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
  <!-- 你的导航栏菜单内容 -->
</nav>

背景图片容器样式 #

给承载背景图片的容器添加自定义CSS，让它向上延伸：

.hero-section {
  background: url('你的背景图片路径') center/cover no-repeat;
  margin-top: -70px; /* 数值根据你导航栏的实际高度调整 */
  padding-top: 110px; /* 把容器内的内容往下推，避免被导航栏挡住 */
  min-height: 100vh;
}

2. 保留导航栏背景，用z-index控层级 #

如果你的导航栏需要保留实色背景，只想让背景图片在它下方（视觉上导航栏压在图片上），可以通过层级属性调整：

.navbar {
  position: relative;
  z-index: 10; /* 让导航栏层级高于背景图片 */
}

.hero-section {
  background: url('你的背景图片路径') center/cover no-repeat;
  position: relative;
  z-index: 1; /* 背景图片层级低于导航栏 */
  min-height: 100vh;
}

要是导航栏是固定在顶部的（带fixed-top类），记得给.hero-section加padding-top，数值等于导航栏高度，避免内容被导航栏遮挡。

3. 固定导航栏的适配方案 #

如果用了fixed-top固定导航栏，直接给背景容器加对应高度的内边距，让背景从页面顶部开始（自然覆盖导航栏下方）：

<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
  <!-- 导航栏内容 -->
</nav>

<section class="hero-section">
  <!-- 内容 -->
</section>

对应的CSS：

.hero-section {
  background: url('你的背景图片路径') center/cover no-repeat;
  padding-top: 70px; /* 等于导航栏的高度 */
  min-height: 100vh;
}

你可以根据自己的设计需求选其中一种方案，要是导航栏高度不固定，还可以用JS动态计算高度来调整数值，不过上面的静态调整基本能解决大部分场景啦！

内容的提问来源于stack exchange，提问作者learner