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 に答える