如何修复全屏背景图上方导航栏及内容重复显示问题？

看起来你遇到的核心问题是背景图容器内的导航栏和内容被重复渲染，结合你代码里的routerLink能看出用了Angular，我整理了几个针对性的解决方案：

一、先排查组件重复渲染的问题 #

最常见的原因是你的导航栏/背景图容器被多次加载了：

• 检查你的app.component.html，如果里面已经包含了导航栏或者整个.bgimg容器，同时你的Home路由组件又重复写了这段代码，就会导致内容叠加重复。
• 打开app-routing.module.ts，确认是否只有一个路由指向包含.bgimg的组件，避免路由配置错误导致组件多次渲染。

优化方案：分离全局导航和页面内容 #

把导航栏作为全局组件放在app.component.html里，只保留背景图和内容在Home组件中：

app.component.html（全局导航）：

<nav class="navbar navbar-expand-lg navbar-dark">
  <div class="d-flex flex-grow-1" style="margin-left: 5%">
    <span class="w-100 d-lg-none d-block"></span>
    <a class="navbar-brand" routerLink="/">Home</a>
    <div class="w-100 text-right">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar7">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </div>
  <div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar7" style="margin-right: 5%">
    <ul class="navbar-nav ml-auto flex-nowrap">
      <li class="nav-item">
        <a routerLink="/software" class="nav-link">Software</a>
      </li>
      <li class="nav-item">
        <a routerLink="/about" class="nav-link">About</a>
      </li>
      <li class="nav-item">
        <a routerLink="/contact" class="nav-link">Contact</a>
      </li>
    </ul>
  </div>
</nav>
<router-outlet></router-outlet>

Home组件的HTML：

<div class="bgimg">
  <div class="myName">
    <span>blah</span>
    <div class="description">
      <span>Developer</span>
    </div>
  </div>
</div>

二、调整CSS确保背景图全屏且无溢出 #

即使解决了渲染重复的问题，也要确保.bgimg容器正确覆盖全屏，避免内容溢出或显示异常：

/* 重置body默认边距，避免多余空间 */
body {
  margin: 0;
  padding: 0;
}

.bgimg {
  background: url("/assets/images/DSC01250.jpg") no-repeat center center fixed;
  background-size: cover;
  opacity: 0.8;
  min-height: 100vh; /* 强制容器占满视口高度 */
  position: relative; /* 确保内部元素定位正常 */
}

.myName {
  font-family: 'Courier New', Courier, monospace;
  margin-top: 300px;
  color: white;
  font-size: 50px;
  text-align: center;
}

.description {
  font-size: 25px;
}

三、额外排查点 #

• 如果还是有重复，检查是否有其他组件或第三方库（比如Bootstrap）的样式导致元素重复渲染；
• 打开浏览器开发者工具（F12），查看Elements面板，确认是否有两个相同的.bgimg或导航栏元素存在，定位重复来源。

按照这个步骤调整后，就能实现单张全屏背景图+无重复内容的效果了。

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