滚动时如何更改固定顶部导航栏的背景颜色？

Question

我无法更改固定顶部导航栏的背景颜色。 有什么建议么？

我正在使用Bootstrap，并且在下面附加了html和CSS。

我尝试了很多不同的事情，但是我必须做错什么。 我将是最简单的方法，因为我是初学者:)

非常感谢！

<!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand js-scroll-trigger" href="#page-top"> <img src="img/logo.png" width=100rem; class="text-align-center m-3">Austroitalianos</a>
      <button class="navbar-toggler navbar-toggler-right" 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">
            <a class="nav-link js-scroll-trigger" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="posts.html">Posts</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

#mainNav {
  min-height: 56px;
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}

#mainNav .navbar-toggler {
  font-size: 80%;
  padding: 0.75rem;
  color: #161616;
  border: 1px solid #161616;
}
#mainNav .navbar-nav .nav-item:active, #mainNav .navbar-nav .nav-item:focus {
  outline: none;
}

@media (max-width: 992px) {
  #mainNav {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: white;
    background-color: white; 
  }  
  #mainNav .navbar-brand {
    padding: .5rem 0;
    color: #161616;
  }
  #mainNav .nav-link {
    padding: 0.5rem;
    color: #161616;
  }
  #mainNav .nav-link:active {
    color: #64a19d;
  }
  #mainNav.navbar-shrink .nav-link {
    color: #161616;
    padding: 0.5rem;
    border-bottom: 0.25rem solid transparent;
  }
  #mainNav.navbar-shrink .nav-link.active {
    color: #64a19d;
    outline: none;
    border-bottom: 0.25rem solid #64a19d;
  }
}