Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/40.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 更改引导';s导航栏不透明度,而不影响按钮_Html_Css_Twitter Bootstrap_Opacity_Navbar - Fatal编程技术网

Html 更改引导';s导航栏不透明度,而不影响按钮

Html 更改引导';s导航栏不透明度,而不影响按钮,html,css,twitter-bootstrap,opacity,navbar,Html,Css,Twitter Bootstrap,Opacity,Navbar,我只希望导航栏按钮可见,而横跨整个页面的实际栏具有完全不透明度。每当我更改导航栏的不透明度时,它都会影响导航栏中的类,即使我指定这些类没有不透明度 我已经发布了一张我试图复制的图片。如您所见,链接完整显示,但导航栏不可见,允许显示完整的背景图像。它可能看起来像一个实心的红色条,但我向你保证它是一个看不见的导航条 任何帮助都将不胜感激!谢谢 以下是我的导航栏HTML代码: <div class="custom_nav"> <div class="navbar navb

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

我已经发布了一张我试图复制的图片。如您所见,链接完整显示,但导航栏不可见,允许显示完整的背景图像。它可能看起来像一个实心的红色条,但我向你保证它是一个看不见的导航条

任何帮助都将不胜感激!谢谢


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

一种解决方案是按给定的方式使用

要更改父对象的不透明度而不影响子对象的不透明度,请在背景属性上使用
rgba
,如下所示:

ul {
  background: rgba(255, 255, 255, 0.7);
}
前3个值是组成颜色的RGB值,最后一个值是颜色的不透明度(在上面的示例中,不透明度为70%)


请参阅。

我用stylu编写了一个混音:

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)
我希望它能帮助那些想要一些不透明的支持几乎所有浏览器的人
认为你的问题不太清楚。您是否在询问如何更改父对象的不透明度而不影响子对象的不透明度?你可以使用rgba作为背景色(而不是不透明度),如果这是你想要的。我建议发布一个提琴来演示您的问题。不透明属性会传播到它的子级。解决这个问题的一个方法是使用@ZakAngelle上解释的机制我正在尝试做你下面评论中的链接所描述的事情,但是导航栏是父类,按钮是子类。我对我的帖子进行了一些编辑,以显示我是如何设置的以及我有什么累了。我对帖子进行了一些编辑,以显示我是如何设置的以及我尝试了什么。
ul {
  background: rgba(255, 255, 255, 0.7);
}
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)