Bootstrap-3导航栏的透明颜色

Question

我遇到了在设置Bootstrap3导航栏透明度或不透明度时的问题。我没有更改bootstrap.css或bootstrap-theme.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>

同时也要查看 Bootply: http://bootply.com/106966

- woj_jas

Answer 1

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

.navbar li { color: #000 } 

http://bootply.com/106969

- Sinan Gül

---

谢谢，现在它是透明的。 你能告诉我如何将图像放在导航栏下面吗？答案：使用相对位置和 top -px。 - woj_jas

导航栏类工作正常，但我的“切换导航”（navbar-toggle、navbar-nav）也变成了透明的。 - Adrian P.

玩了一会儿这个小提琴。得到了这个：https://www.codeply.com/p/2GzQLtGRL5 - mggluscevic

Answer 2

这个类是 .navbar-default。你需要在你的自定义CSS中创建一个类 .navbar-default，并遵循CSS代码。如果你不想在菜单上使用阴影，也可以在同一类中设置。

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

要更改导航栏字体颜色，需要修改以下类名：.navbar-default .navbar-nav>li>a。请参考下面的代码：

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

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

- Mujahidul Jahid

---

仍然有框边，链接颜色没有改变？ - Faisal

Answer 3

你可以在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/

- arnold

Answer 4

1. 访问 http://px64.net/
2. 调整不透明度，添加图片或选择颜色。
3. 复制网站提供的 HTML 或 CSS（CSS 更容易）。

4. 选择要修改的元素，例如导航栏。

5. .navbar{ background-image:url(网站提供的链接); background-repeat:repeat;

6. 完成。

- Carl Sergile