不影响按钮的情况下更改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;
    }   
}

- Brian

---

你的问题不是很清楚。你是在问如何改变父元素的透明度而不影响子元素的透明度吗？如果是这样，你可以使用 rgba 来设置背景颜色（而不是透明度）。我建议你发布一个演示你问题的 fiddle。 - zxqx

不透明度属性会传播到其子元素。解决此问题的一种方法是使用http://www.impressivewebs.com/demo-files/css-opacity/中解释的机制。 - Arun P Johny

@ZakAngelle 我正在尝试实现下面评论中链接所描述的内容，但是将导航栏作为父元素，按钮作为子元素类。 - Brian

Answer 1

一种解决方案是使用rgba，根据此处给出的方法。 但ie < 9不支持。

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

Fiddle

- Arun P Johny

---

我对我的帖子进行了一些编辑，展示了我的设置和尝试的内容。 - Brian

Answer 2

如果要改变父元素的不透明度而不影响子元素的不透明度，可以在背景属性上使用 rgba，像这样：

ul {
  background: rgba(255, 255, 255, 0.7);
}

前三个值是组成颜色的RGB值，最后一个值是颜色的不透明度（在上面的示例中，不透明度为70%）。

请参见演示。

- zxqx

---

我对我的帖子进行了一些编辑，以展示我如何设置和尝试了什么。 - Brian

Answer 3

我已经使用Stylus编写了一个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)

我希望这可以帮助那些想要在几乎所有浏览器中支持不透明度的人。

- jiahut