Bootstrap-3 Navbar 的透明颜色答案

【问题标题】：Transparent color of Bootstrap-3 NavbarBootstrap-3 Navbar 的透明颜色
【发布时间】：2017-12-05 22:08:19
【问题描述】：

我在设置 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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

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

.navbar li { color: #000 }

http://bootply.com/106969

【讨论】：

谢谢，现在透明了。你能告诉我如何将图像放在导航栏下吗？答案：与 top -px 相对位置
为导航栏类工作，但我的“切换导航”（navbar-toggle，navbar-nav）也变得透明。
在这把小提琴上演奏了更多。得到这个：codeply.com/p/2GzQLtGRL5

【解决方案2】：

您可以将它用于您的 css，主要使用 css3 rgba 作为背景，以控制不透明度并为旧浏览器使用背景后备，使用纯色或透明 .png 图像。

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

【讨论】：

【解决方案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>li>见下面的代码：

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

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

【讨论】：

还有边框，链接颜色没变？

【解决方案4】：

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

【讨论】：