Html 让导航栏重叠标题？

我正在使用引导。目前，我的导航栏和标题图像之间存在差距。我希望导航栏位于图像顶部，并且图像从页面顶部开始。我如何摆脱白色的差距

以下是我的导航栏和图像HTML：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

到目前为止，我的导航栏上还没有自定义css。我尝试将图像设置为顶部：0，甚至-10%，但它不会移动。

---

谢谢大家!

通过将.intro修改为：

.into {
      position: relative;
      height: auto;
      transform: translateZ(0);
      top: -20px; /* .navbar has margin-bottom: 20px; */
}

    *, *:before, *:after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      width: 100%;
      height: 100%;
      font-family: 'Roboto', sans-serif;
    }

    .intro {
      position: relative;
      height: auto;
      transform: translateZ(0);
      // background-image: linear-gradient(35deg, $blue, $yellow);

      img {
        position: relative;
        display: block;

        width: 100%;

        height: auto;
        z-index: 1;
        mix-blend-mode: multiply;
      }
    }

    .intro .caption {
      position: absolute;
      bottom: 25%;
      left: 0;
      width: 100%;
      text-align: center;
      z-index: 3;
      color: white;

      h1 {
        display: inline-block;
        width: 70%;
        font-size: 6vw;
        font-weight: 100;
      }
    }

    .intro .overlay {
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 100%;

      z-index: 2;
      pointer-events: none;

      svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }

.into {
      position: relative;
      height: auto;
      transform: translateZ(0);
      top: -20px; /* .navbar has margin-bottom: 20px; */
}