Question

我正在创建一个带引导程序的网站，当我创建一个具有视差效果的特色图像时遇到了问题。似乎某些东西在导航栏（Bootstrap）和特色图像之间创建了一个空间。

.parallax {
background-image: url("../images/aboutHeader.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.parallax h2 {
color: white;
font-size: 4em;
text-align: center;
padding-top: 100px;
}


<!-- NAVBAR
    ================================================== -->
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
          <img src="images/headerWhite.png" alt="Bird's Aerial Imaging LC" style="height:100%">
        </a>
      </div>
      <div class="collapse navbar-collapse navbar-right" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li class="active"><a href="#">About</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- FEATURED IMAGE =============================================================== -->
  <section style="height:250px;">
    <div class="parallax">
      <h2>About Us</h2>
    </div>
  </section>

Answer 1

您可以将position:absolute; top:0;添加到您的部分代码中。这肯定会消除空间......

也可能是因为该部分的默认边距或填充。尝试将margin:0; padding:0;添加到该

Answer 2

我从你那里了解到你的意思是视差div和导航栏之间的白色垂直空间，我的答案将取决于那个，如果你的问题不同，请告诉我。

您的解决方案就是删除：

1）“h2”中的 margin 属性：

.parallax h2 {
  margin-top: 0;
}

2）“navbar”中的填充属性：

.navbar {
  padding-bottom: 0;
}

希望它适合你！

如何消除我的navabar和特色图像之间的这种不必要的差距？

2 个答案: