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通道，就像这样

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

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

你会看到我也在下拉列表中声明了这一点，假设你是以后的。

如何从Bootstrap 3中的navbar-collapse中删除不透明度（透明度）？

1 个答案: