css - 在与主要内容关联的导航栏中添加背景

Question

如何将背景图片关联到我的导航栏？我尽力去联想它，但我失败了。您有任何教程或技巧吗？

Here's my index

<nav class="navbar navbar-default navbar-fixed-top">
      <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>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
          </ul>
        </div>
      </div>
    </nav><!--End of navbar-->

    <!-- start of picture div-->
    <div id="bgp">

              <h1 id="top-header">

              </h1>  

    </div>

Here's my CSS:

#bgp
{
background-image: url("images/city.png");
opacity: 0.8;
width: 100%;
height: 100rem;
background-size: 100%,500%;
background-repeat: no-repeat;
}

Answer 1

好的，开始吧:https://jsfiddle.net/d7uamo66/

基本上标题没有图像但是是透明的。 如果您向下滚动标题透明度变为白色。