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

Question

如何将背景图像关联到导航栏？我尽力联系它，但我失败了。你有任何教程或提示我该怎么做？

  

这是我的索引

<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>

  

这是我的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/

基本上标题没有图像但是透明。 If向下滚动标题透明度更改为白色。