5

ページ全体にまたがる実際のバーは完全に不透明であるのに対し、ナビゲーションバーボタンのみを表示したいのです。ナビゲーションバーの不透明度を変更すると、それらのクラスに不透明度がないように指定した場合でも、ナビゲーションバー内のクラスに影響します。

複製しようとしているものの画像を投稿しました。ご覧のとおり、リンクは完全に表示されますが、ナビゲーションバーは表示されないため、完全な背景画像を表示できます。赤い実線のバーのように見えるかもしれませんが、目に見えないナビゲーションバーであることを保証します。

ここに画像の説明を入力してください

どんな助けでも大歓迎です！ありがとう。

これが私のナビゲーションバーの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;
    }   
}
4

3 に答える 3

18

1つの解決策は、ここに示すようにrbgaを使用することです。つまり、<9では機能しません。

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

フィドル

于 2013-01-24T03:49:34.963 に答える
2

子の不透明度に影響を与えずに親の不透明度を変更するにはrgba、次のようにbackgroundプロパティで使用します。

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

最初の3つの値は色を構成するRGB値であり、最後の値は色の不透明度です（上記の例では、不透明度は70％です）。

DEMOを参照してください。

于 2013-01-24T03:50:00.350 に答える
0

私は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)

ほとんどすべてのブラウザが考えるサポートで不透明度を求めている人に役立つことを願っています

于 2014-08-18T02:14:19.117 に答える