html - 在导航栏下方的 div 中显示背景图像

Question

bootstrap 新手。

1. 我想在 bootstrap 中的 div 内的 NavBar 下方显示背景图像。由于某种原因，下面代码中的图像未呈现正确的高度。如何在保持图像响应能力的同时获得正确的高度？

2. 此外，我们如何更改滚动时 NavBar 的颜色？当我滚动时，下面的代码没有任何反应。

HTML:

          <nav class="navbar navbar-expand-lg bg-secondary fixed-top text-uppercase" id="mainNav">


        <div class="container">
          <a class="navbar-brand js-scroll-trigger" href="#page-top">  <img src="img/logo-clear.png" alt="logo" style="width:160px;"></a>
          <button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars"></i>
          </button>
          <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item mx-0 mx-lg-1">
                <a class="nav-link py-2 px-0 px-lg-3 rounded js-scroll-trigger" href="#portfolio">Portfolio</a>
              </li>
              <li class="nav-item mx-0 mx-lg-1">
                <a class="nav-link py-2 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">About</a>
              </li>
              <li class="nav-item mx-0 mx-lg-1">
                <a class="nav-link py-2 px-0 px-lg-3 rounded js-scroll-trigger" href="#services">Services</a>
              </li>
              <li class="nav-item mx-0 mx-lg-1">
                <a class="nav-link py-2 px-0 px-lg-3 rounded js-scroll-trigger" href="#contact">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

  <!-- Header -->
  <div class="page-header bg-primary" style="background-image: url(./img/1.jpg);">
    <p class="text-center text-uppercase text-secondary mb-0" id="mainText">Portfolio</p>
  </div>
  </div>

CSS:

/*for navbar*/
.bg-secondary {
  background-color: transparent !important;
    /* background-color: transparent !important; */
}

.bg-secondary.scrolled{
   background-color: #333300 !important;
}

.page-header{
  background-size: cover;
  height: auto;
}

JS:

 <script>
  $(window).scroll(function(){
    $('nav').toggleClass('scrolled', $(this).scrollTop() > $('nav'));
  });
</script>

Answer 1

是这样的吗？ https://jsfiddle.net/wwWaldi/nrysp61w/10/

你必须为你的标题设置高度，(为了演示我更改了标题的 url)

height: 300px;