Html Bootstrap-3 导航栏的透明颜色

Transparent color of Bootstrap-3 Navbar

提问by woj_jas

I'm having problem with setting bootstrap3 navbar transparency or opacity color. I didin't change anything in bootstrap.css or bootstrap-theme.css In my menu I'm Trying to put image under that and set color to black-transparent or black with opacity like here: http://i.imgur.com/f9NNwtD.pngYou can see that opacity ammount is not very high but it is , and i have to do something like that. When I'm changing anything the color is setting white so please help me.

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

The Code below:

代码如下：

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

And bootply: http://bootply.com/106966

和 bootply：http://bootply.com/106966

回答by Sinan Gül

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

.navbar li { color: #000 } 

http://bootply.com/106969

http://bootply.com/106969

回答by Mujahidul Jahid

The class is .navbar-default. You need to create a class on your custom css .navbar-default.And follow the css code. Also if you don't want box-shadow on your menu, you can put on the same class.

该类是 .navbar-default。您需要在自定义 css .navbar-default.and 上创建一个类。并遵循 css 代码。此外，如果您不想在菜单上使用 box-shadow，您可以使用相同的类。

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

To change font navbar color, the class is to change – .navbar-default .navbar-nav>li>a see the code bellow:

改变字体导航栏颜色，类是改变- .navbar-default .navbar-nav>li>a 看下面的代码：

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

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

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

回答by arnold

you can use this for your css , mainly use css3 rgba as your background in order to control the opacity and use a background fallback for older browser , either using a solid color or a transparent .png image.

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

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

More info: http://css-tricks.com/rgba-browser-support/

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

回答by Carl Sergile

1. Go to http://px64.net/
2. mess around with opacity, add your image or choose color.
3. copy either html or css(css is easier) the site spits out.

4. Select your element aka the navbar.

5. .navbar{ background-image:url(link that the site provides); background-repeat:repeat;

6. Enjoy.

1. 去http://px64.net/
2. 处理不透明度，添加图像或选择颜色。
3. 复制网站吐出的 html 或 css（css 更容易）。

4. 选择您的元素又名导航栏。

5. .navbar{ background-image:url(网站提供的链接); 背景重复：重复；

6. 享受。