如何使navbar透明？

这是使用Bootstrap框架的导航栏的HTML代码。我想让它透明一点。如何使navbar透明？

如何用CSS做到这一点？我试过但没有发生。

<nav role="navigation" class="navbar navbar-default"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand"></a> 
    </div> 
    <!-- Collection of nav links and other content for toggling --> 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav" style="margin-left:10%"> 
      <li><a href="#">HOME</a></li> 
      <li><a href="#">ABOUT US</a></li> 
      <li><a href="#">HEALTH MANAGEMENT</a></li> 
      <li><a href="#">PRE-POST PRAGNANCY</a></li> 
      <li><a href="#">WEIGHT LOSS</a></li> 
      <li><a href="#">CONTACT US</a></li> 

     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#"></a></li> 
     </ul> 
    </div> 
</nav>

来源

2015-10-05 Nishant

发表您对资产净值的CSS。 –

[css使引导navbar透明]的可能的副本（http://stackoverflow.com/questions/16392952/css-to-make-bootstrap-navbar-transparent） –

您使用的是css预处理器吗？如果你使用less/sass，只需要替换变量'@ navbar-default-bg' 例如：'@ navbar-default-bg：rgba（255,255,255,0.5）' – ppollono

添加到您的CSS

.navbar-header { 
    background:transparent; 
}

来源

2015-10-05 10:26:02

你没有张贴的CSS。但是，如果您想更改导航的背景颜色，则需要使用RGBA颜色。所以，你可以让你的导航栏有白色背景有点透明的这样 -

.navbar-default{ 
    background-color: rgba(255, 255, 255, 0.7); 
}

来源

2015-10-05 10:29:29

给你nav的ID，所以很容易与CSS选择。

就用

#yourNavsID { opacity:0.7; }

显然可以改变到任何数量的适合您需要的0.7。

例小提琴：http://jsfiddle.net/fr2wayy7/

来源

2015-10-05 13:01:30 Jay

只需使用rgba颜色。

例如为：

background-color: rgba(0, 0, 0, 0.5)

来源

2015-10-05 13:24:45

如何使navbar透明？

回答

相关问题