html - 导航栏反转的透明度

Question

我有 navbar-inverse，我需要有轻微的透明度来显示我的导航栏位于我的背景图像上。我为我的导航栏应用了不透明度，但我无法实现温和的透明度。正如我在此处所附图片中所期望的那样。

.logotitle {
    width:30px;
}


.mynavStyle{
    height: 60px;!important   
}

.navbar {
background:grey;!important
opacity: 0.6;!important
    filter:alpha (opacity=10);!important
}

.coverphoto{
    background-image: url("cphoto.jpg");
    height: 369px;
}

HTML:

<div class="coverphoto">
  <nav class="navbar navbar-inverse mynavStyle">
  <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>
      <a class="navbar-brand" href="#"> <img class="logotitle pull-left" src="css/images/logo.png"></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Find Talent</a></li>
        <li ><a href="#">Find Job</a></li>
        <li><a href="#">Find Hirer</a></li>
        <li><a href="#">Find Talent/Casting Manager</a></li>
      </ul>
    </div>
  </div>
</nav>
</div>

Answer 1

试试这个

.navbar {
       background-color: rgba(0,0,0,.6)
    }