更改Bootstrap的导航栏不透明度而不影响按钮

Question

我只希望我的导航栏按钮可见,而横跨整个页面的实际条形图具有完全不透明度.每当我更改导航栏的不透明度时,它都会影响其中的类,即使我指定这些类没有不透明度.

我发布了一张我想要复制的图片.如您所见,链接显示为完整,但导航栏不可见,允许显示完整的背景图像.它可能看起来像一个坚固的红色条,但我向你保证它是一个看不见的导航栏.

任何帮助将非常感激!谢谢.

---

这是我的导航栏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-->

到目前为止,我已尝试使用以下内容编辑我的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;
    }   
}

Answer 1

一个解决方案是使用,RGBA给出这里.它不适用于<9,

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

小提琴