Question

我在设置bootstrap3导航栏透明度或不透明度颜色方面遇到问题。我没有在bootstrap.css或bootstrap-theme.css中改变任何东西在我的菜单中，我试图将图像置于其下并将颜色设置为黑色透明或黑色，不透明度如下： http://i.imgur.com/f9NNwtD.png 你可以看到不透明度ammount不是很高但它是，我必须做那样的事情。当我换任何东西时，颜色都是白色的，所以请帮助我。

以下代码：

<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>

和bootply： 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-default。您需要在自定义css .navbar-default上创建一个类。并按照css代码。此外，如果您不想在菜单上使用box-shadow，则可以使用相同的类。

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

要更改字体导航栏颜色，该类将更改 - .navbar-default .navbar-nav＆gt; li＆gt; a请参阅下面的代码：

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

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

Answer 4

转到http://px64.net/
弄乱不透明度，添加图片或选择颜色。
复制html或css（css更容易）网站吐出。
选择您的元素，即导航栏。
.navbar { background-image：url（网站提供的链接）; 背景重复：重复;
享受。

Bootstrap-3 Navbar的透明色

4 个答案: