导航栏和图像显示之间的线

Question

我试图让它成像，因此图像就在导航栏后面，导航栏位于图像的顶部，尽管图像必须从页面顶部开始，就像导航栏一样，我不知道为什么它在它们之间显示这条白线。

这是一个有角度的6网站（在这种情况下并不重要），我正在使用bootstrap。（我知道将所有这些代码放在一个样式表中并不是非常有棱角分明的，我只是对它进行模糊处理，然后我可以重构）。

我尝试用定位和z-index和margin来模糊，但没有任何作用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Angular Bootstrap Demo</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <!-- Nav bar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarColor02"
        aria-controls="navbarColor02"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarColor02">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#"
              >Home <span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input
            class="form-control mr-sm-2"
            type="text"
            placeholder="Search"
          />
          <button class="btn btn-secondary my-2 my-sm-0" type="submit">
            Search
          </button>
        </form>
      </div>
    </nav>
    <!--  -->

    <!-- main app root -->
    <app-root></app-root>
    <!--  -->
    <!-- Dependencies -->
    <script
      src="https://code.jquery.com/jquery-3.1.1.min.js"
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
      crossorigin="anonymous"
    ></script>
    <!--  -->
  </body>
</html>

和样式表：

.jumbotron {
  color: #fff;
  height: 500px;
}

html {
  background-image: url("../assets/images/BBLogo.png");
}

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

#front-page-links {
  margin: auto;
  width: 50%;
  padding: 10px;
}

.logo {
  width: 100%;
  height: 100vh;
  background: url(../assets/images/BBLogo.png) no-repeat 50% 50%;
  background-size: cover;
}

/* Navbar */

@font-face {
  font-family: circuitBored;
  src: url(../assets/fonts/CircuitBoredNF.ttf);
}

@font-face {
  font-family: computerFont;
  src: url(../assets/fonts/jura.demibold.ttf);
}

.navbar.navbar-inverse {
  margin-bottom: 0;
}

nav {
  position: fixed;
  width: 100%;
  line-height: 20px;
  margin-bottom: 0;
}

nav ul {
  line-height: 60px;
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #fff;
  font-family: computerFont !important;
  font-size: 16px;
  font-weight: bold;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 1s;
}

nav.black ul {
  background: #000;
  font-family: computerFont !important;
  font-size: 16px;
  font-weight: bold;
}

nav ul li {
  display: inline-block;
  font-family: computerFont;
  font-size: 16px;
  font-weight: bold;
  padding: 16px 40px;
}

nav ul li a {
  text-decoration: none;
  font-family: computerFont;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.menu-icon {
  line-height: 60px;
  width: 100%;
  background: #000;
  text-align: right;
  box-sizing: border-box;
  font-family: computerFont;
  padding: 15px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}

.menu {
  font-family: computerFont;
  font-size: 16px;
  font-weight: bold;
}

.menu ul li a:hover {
  background-color: #35701c;
}

.menu li ul {
  display: none;
  position: absolute;
}

.menu li:hover ul {
  display: grid;
  top: 55px;
}

.submenuD li {
  position: relative;
  text-align: left;
  z-index: 1;
}

.copyright {
  font-family: "computerFont";
  font-weight: lighter;
  text-align: center;
}

@media (max-width: 950px) {
  .logo {
    position: fixed;
    top: 0;
    margin-top: 16px;
  }

  nav ul {
    max-height: 0px;
    background: #000;
  }

  nav.black ul {
    background: #000;
  }

  .showing {
    max-height: 34em;
  }

  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    text-align: center;
  }

  .menu-icon {
    display: block;
  }
}

Answer 1

另一答案

Answer 2

另一答案