html - 如何以全尺寸设置超大屏幕的背景图像并使其响应？

Question

我想让超大屏幕的背景图像具有完整尺寸，而无需以像素为单位声明高度。这样做的原因是我希望它能够响应。我还希望图像位于透明导航栏下方。

可以看看here

它的代码是:

    <nav class="navbar-inner navbar-inverse">
  <div class="container">
    <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="#">Cosmos</a>
    </div>
   <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav pull-right">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    </div>
  </div>
</nav>
<div class="row">
  <div class="col-md-12">
    <div class="jumbotron" id="first">
      <h1 class="text-center" id="h1first">
        Welcome to Cosmos<br>
        web design
      </h1>
    </div>
  </div>
</div>

CSS 是:

    .navbar-inner {
    background:transparent;
}

#first {
  background-image: url(http://netdna.webdesignerdepot.com/uploads/2014/07/featured36.jpg);
  background-size: cover;
  height: 900px;
}

Answer 1

您可以为您的英雄使用 100vh 的最小高度。而且你必须绝对定位你的导航栏，就像这样:

https://codepen.io/Sixl/pen/oBrxKr