改变Bootstrap的navbar透明度，而不影响按钮 [英] Changing Bootstrap's navbar opacity without affecting the buttons

问题描述

我只希望我的导航栏按钮可见，而跨越整个页面的实际栏具有完全不透明度。每当我改变导航条的不透明度时，它会影响它内部的类，即使我指定这些类没有不透明度。

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.

这是我的navbar HTML程式码：

Here's my navbar HTML code:

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

到目前为止，我已经尝试使用以下代码编辑我的CSS：

So far I've tried editing my CSS with the following:

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

推荐答案

解决方案是使用 rbga （如这里。 它不工作在ie& 9 ，

One solution is to use rbga as given here. It does not work in ie < 9,

.custom_nav .navbar.navbar-fixed-top .navbar-inner{
    background: rgba(255, 255, 255, 0.3);
}

小提琴

这篇关于改变Bootstrap的navbar透明度，而不影响按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！