Html 在不影响按钮的情况下更改 Bootstrap 的导航栏不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14493405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing Bootstrap's navbar opacity without affecting the buttons
提问by Brian
I only want my navbar buttons to be visible, while the actual bar that spans across the entire page has full opacity. Whenever I change the opacity of the navbar it affects the classes inside of it, even when I specify those classes to have no opacity.
我只希望我的导航栏按钮可见，而横跨整个页面的实际栏完全不透明。每当我更改导航栏的不透明度时，它都会影响其中的类，即使我将这些类指定为没有不透明度。
I've posted an image of what I'm trying to replicate. As you can see, the links appear in full, but the navbar is invisible, allowing the complete background image to show. It might look like a solid red bar, but I assure you it's an invisible navbar.
我已经发布了我试图复制的图像。如您所见，链接完整显示，但导航栏不可见，允许显示完整的背景图像。它可能看起来像一个纯红色的栏，但我向你保证它是一个不可见的导航栏。
Any help would be super appreciated! Thanks.
任何帮助将不胜感激！谢谢。
Here's my navbar HTML code:
这是我的导航栏 HTML 代码：
<div class="custom_nav">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html">Homegrown</a>
<div class="nav-collapse">
<ul class="nav nav-pills">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Contact</a></li>
</ul><!-- /.nav -->
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
</div><!--/.custom_nav-->
So far I've tried editing my CSS with the following:
到目前为止，我已经尝试使用以下内容编辑我的 CSS：
ul .nav .nav-pills {background:rgba(255,255,255,0.5)}
.custom_nav {
.navbar.navbar-fixed-top {
background:rgba(255,255,255,.5);
}
.navbar .nav > .active a, .navbar .nav > .active a:hover, .navbar .nav > li a:hover {
background:rgba(210,105,30, 0); text-shadow:none;
}
}
回答by Arun P Johny
One solution is to use rbgaas given here. It does not work in ie < 9,
一个解决方案是使用，RGBA给出这里。它不适用于 ie < 9，
.custom_nav .navbar.navbar-fixed-top .navbar-inner{
background: rgba(255, 255, 255, 0.3);
}
回答by zakangelle
To change the opacity of the parent without affecting the opacity of the children, use rgbaon the background property, like this:
要在不影响子项的不透明度的情况下更改父项的不透明度，请rgba在 background 属性上使用，如下所示：
ul {
background: rgba(255, 255, 255, 0.7);
}
The first 3 values are the RGB values that make up the color, and the last value is the opacity of the color (in the example above, the opacity is 70%).
前 3 个值是组成颜色的 RGB 值，最后一个值是颜色的不透明度（在上面的示例中，不透明度为 70%）。
See DEMO.
见演示。
回答by jiahut
I had write a mixin with stylu:
我用手写笔写了一个mixin：
support-for-ie ?= true
opacity(n)
opacity n
-moz-opacity n
filter unquote('alpha(opacity=' + round(n * 100) + ')')
if support-for-ie
filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')')
.opacity-70
opacity(0.7)
I hope it can help someone who want some opacity with support almost all browser thinks
我希望它可以帮助那些想要支持几乎所有浏览器认为不透明的人
