Transbarrency to navbar inverse

Question

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

.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)
    }

Answer 2

只需设置rgba背景：

<ol>
   <li data-value="1">
        <ol>
           <li data-value="1"></li>
           <li data-value="2"></li>
           <li data-value="3"></li>
        </ol>
   </li>
   <li data-value="3"></li>
   <li data-value="3"></li>
</ol>

Answer 3

.navbar {
    background-color: transparent;
    background: transparent;
    opacity: 0.6;!important
    filter:alpha (opacity=10);!important

}

试试这个

Answer 4

您应该使用背景透明度而不是不透明度，即。＆＃34;

.navbar{
   background: rgba(0,0,0,0.6);
}

  

rgba（）会影响单个属性，例如颜色，背景颜色或   边框颜色，由CSS定位的元素，只有这些元素

     

不透明度会影响目标的所有属性（整个展望）   元素及其所有DOM树孩子

Answer 5

这是不正确的语法：

<div>Some text</div>

应该是：

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