ブートストラップトランスペアレントnavbar

Question

私はnavbarをthisのように透明にするようにしています。しかし、私はそれを動作させるように見えることはできません。私はrga（0,0,0,0.5）をnavbarクラスに追加しました。

Answer 1

私はそれを理解しました。これを将来必要とする人のために。

.navbar.transparent.navbar-inverse .navbar-inner { 
    background: rgba(0,0,0,0.4); 
} 

そして、私のHTML構文は次のようになります：

<div class="navbar transparent navbar-inverse navbar-fixed-top"> 
    <nav class="navbar-inner"> 
    ... 
    </div> 
</div> 

Answer 2

まず、私はあなたが

rga(0,0,0,0.5) 

を書いたRGBまたはRGBAのために間違った構文を持っていると思う私がいたCSSのオーバーライドを追加しました実際にそうでなければならないとき

rgba(0,0,0,0.5); 

は、例えば、これを見てみましょう：

HTML

<div class="navbar"> 
    <ul> 
    <li>Menu1</li> 
    <li>Menu2</li> 
    </ul> 
</div> 

CSS

.navbar { 
    background: rgba(0,0,0,0.5); 
    } 

私は、ブラウザの人々が使用しているだけの場合には、フォールバックの色を持つことを示唆していますそれをサポートしていません。

CSSフォールバック

.navbar { 
     background: rgb (0,0,0); 
    } 

Answer 3

あなたも、あなたが透明な背景を取得します。この

.navbar-default { 
    background: none; 
} 

または

.navbar { 
    background: none; 
} 

のように使用することができます。

Answer 4

透明なナビゲーションバーの場合は、かなり簡単です。 CSSドキュメントでは、3つのうちの1つを実行できます。

A.簡単な方法ですが、この方法ではあまり学習しません。あなたは文字通り、Navbarの背景が透明であることをCSSドキュメントに入力することができます。非常に単純：

.navbar 
{ 
    background-color: transparent; 
} 

B.あなたは間接的にR、G 0と1との間に何かにRGBA背景色のアルファチャネルを設定することができ、そしてBは、赤色、緑色、及び青色を制御する座標ピクセルである。 Aまたはアルファチャンネルは、不透明度/透明度を制御します。 R、G、Bの場合、0から255の間の値を入力できます。ただし、Aアルファチャンネルの場合、0から1の間の値を入力する必要があります。1は完全に不透明であることを意味します完全に可視）、0は完全に透明（不可視）であることを意味します。アルファチャンネルに異なる値を設定すると、ナビバーの透明度を決めるのに役立ちます。 navbarを固定トップにし、Webページ全体で背景色が異なる場合に非常に便利です。

ああ、色について...もっと多くのことがあります。

この手順をさらに進めることができます。あなたのnavbarを透明にし、明るい/白っぽい色合いにするには、次のようにします。

.navbar 
{ 
    /* White tint with 0.5 opacity. */ 
    background-color: rgba(255,255,255,0.5); 
    /* Notice how RGB of 255,255,255 is white. */ 
} 

それとも、あなたはあなたのナビゲーションバーが暗く、黒い色合いと透明になりたい場合は、次の操作を行うことができます。今すぐ

.navbar 
{ 
    /* Example with a black tint and 0.5 opacity. */ 
    background-color: rgba(0,0,0,0.5); 
    /* RGB of 0,0,0 is black. */ 
} 

、あなたは透明ナビゲーションバーを与えたい場合は、例えば、緑色の色合い、Gの緑の値で周囲を混乱させる！赤の場合は、R値で囲みます。青の場合、B値で周囲を混乱させます。 RGBでの六角＃の008f00の緑、または（0,143,0）の場合、それはこのようなものになるだろう：

.navbar 
{ 
    /* Green tint of RGB 0,143,0, and with 0.5 opacity. */ 
    background-color: rgba(0,143,0,0.5); 
} 

この情報がお役に立てば幸い！