css - 如何从 Bootstrap 3 中的导航栏折叠中删除不透明度(透明度)？

Question

我正在使用 bootstrap 3。我有一个透明的导航栏和一个背景图像。当我的分辨率是智能手机或平板电脑时，我的菜单栏会折叠成一个按钮。当我单击按钮时，我的菜单会弹出。但是，因为我的父元素是透明的，所以我的导航栏折叠也是透明的，菜单链接在背景图像中看不清楚。我需要使用哪个属性才能使折叠菜单变成纯白色？

<header class="container">
    <div class="bg"> <!--Background Image-->
    <div class= "number">
        <div class="number-wrapper">
            <span id="tel">(123) 456 7890 </span>
        </div>
    </div>
    <nav class="navbar navbar-default" role="navigation">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <img src="images/logo2.png" class="img-responsive" alt="Sample Image"/>
            </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="index.html">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
                <li><a href="contact-link.html">Contact Us</a></li>
                <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span style="color: #27A9E1">Menu 4 </span><span class="caret"  style="color: #27A9E1"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
</nav><!--The end of the menu bar-->
</div>
</header>

CSS:

nav.navbar.navbar-default {
border-top: none;
background-color: #FFFFFF;
opacity: 0.7;
}

Answer 1

封闭元素上的不透明度不是可行的方法，因为一旦声明不透明度，所有封闭元素都将继承相同的不透明度，这是无法逆转的。解决方案？在 background-color 上使用 alpha channel ，就像这样

background-color: rgba (256,256,256, 0.7)

示例:http://www.bootply.com/s92TKwxRMg

你会看到我也在下拉列表中声明了它，假设这就是你所追求的。