0

如何使菜单栏背景透明但菜单栏上的文本仍然不透明？

这是 twitter 引导轮播模板。

而在这一行中，

 <div class="navbar navbar-inverse navbar-static-top" style="background-color: rgba(0, 0, 0, 0.701961); background-position: initial initial; background-repeat: initial initial; opacity: 0.2;">

我想要仅背景透明，以便我页面中的其他图像可以使用透明布局显示。

对于整个背景，我对 div#bg:after 做了类似的事情，但对于引导程序，我不知道我是如何做到这一点的。

以下是我的代码。

提前致谢！

    <div class="navbar-wrapper">
        <div class="container">
            <div class="navbar navbar-inverse navbar-static-top" style="background-color: rgba(0, 0, 0, 0.701961); background-position: initial initial; background-repeat: initial initial; opacity: 0.2;">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                    <!-- toggle menu for mobile page -->
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="#buy" target="_blank"><i class="icon-shopping-cart icon-0.25"></i>&thinsp; &thinsp; Buy Now</a></li>
                        </ul>
                        </button>
                        <a class="navbar-brand" href="http://abc.com"> abc</a>
                    </div>


                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li class="active" ><a href="http://abc.com">Home</a></li>
                            <li><a href="#about">Products</a></li>
                            <li><a href="#contact">Connect</a></li>
                            <li><a href="#contact">Get Some</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-shopping-cart icon-large"></i>&thinsp; Buy Now <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li class="divider"></li>
                                    <li class="dropdown-header">Payment Option</li>
                                    <li><a href="#">Paypal.com</a></li>
                                    <li><a href="#">Amazon.com</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
4

2 回答 2

0

这个例子可以帮助你得到你想要的。 小提琴 

div.background
  {
  width:500px;
  height:250px;
  background:url(klematis.jpg) repeat;
  border:2px solid black;
  }
div.transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  }
于 2013-09-29T06:27:50.547 回答
0

只需使用它而不是您的代码

<div class="navbar navbar-inverse navbar-static-top" style="background-color: rgba(0,0,0,0.3); background-position: initial initial; background-repeat: initial initial; ">
于 2018-02-12T12:42:29.227 回答