透明颜色的Bootstrap-3 Navbar

Question

我在设置bootstrap3肚脐透明或不透明颜色方面有问题。我没有改变bootstrap.css或引导主题中的任何东西。在我的菜单中，我试图把图像放在下面，并将颜色设置为黑色-透明的或黑色的不透明，比如这里的不透明度：http://i.imgur.com/f9NNwtD.png，你可以看到不透明的安装不是很高，但它是，我必须做类似的事情。当我改变任何东西时，颜色是白色的，所以请帮助我。

“守则”如下：

<div class="navbar transparent navbar-inverse navbar-static-top hr">
    <div class="navbar-brand logo"></div>
    <div class="navbar-brand-right">
    </div>
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav mineul" style="font-size:17px;margin-top:9px; color:white;">
              <li><a href="#">Test1</a></li>
               <li><a href="#">Test1</a></li>
               <li><a href="#">Test1</a></li>
            </ul>

        </div>
    </div>
</div>

以及引导：http://bootply.com/106966

Answer 1

.navbar {
   background-color: transparent;
   background: transparent;
   border-color: transparent;
}

.navbar li { color: #000 } 

http://bootply.com/106969

Answer 2

您可以将此用于您的css，主要使用css3 rgba作为您的背景，以便控制不透明度，并为旧浏览器使用背景回退，无论是使用纯色还是透明的.png图像。

.navbar {
   background:rgba(0,0,0,0.5);   /* for latest browsers */
   background: #000;  /* fallback for older browsers */
}

更多信息：http://css-tricks.com/rgba-browser-support/

Answer 3

类是..navbar默认值。您需要在您的定制css上创建一个类，并遵循css代码。此外，如果你不想在你的菜单上的框阴影，你可以放在同一类。

 .navbar-default {
      background-color:transparent !important;
      border-color:transparent;
      background-image:none;
      box-shadow:none;  
 }

​

​

要更改字体导航栏的颜色，类是要更改-. navbar -默认的.navbar-nav>li>a，请参见下面的代码：

  .navbar-default .navbar-nav>li>a {
     font-size:20px; 
     color:#fff; 
 }

参考文献：http://twitterbootstrap.org/bootstrap-navbar-background-color-transparent/