2016-04-29 53 views
0

ブートストラップのナビゲーションバーの背景色を低い不透明度rgbaに変更しようとしていますが、できません。変更は一切ありません。これは私のカスタムナビゲーションバーのCSSです:ブートストラップ3:navbarでrgba背景色を使用できません

.navbar-custom { 
    background-color: rgba(255,255,255,.3) } 

そして、これは私のhtmlのナビゲーションバーコードです:

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation"> 
     NAVBAR CONTENT GOES HERE 
    </nav> 
+2

'rgba(255,255,255.3)'の代わりに 'rgba(255,255,255、.3)'; – Hitmands

+0

申し訳ありませんが、私はすでに正しい構文を使用していますが、ここで間違って入力しました。まだ動作しません。 – suchanoob

+0

他の構文を使用してbgの色を設定できますか? 16進コード、または色名など。赤? –

答えて

0

RGBA(255,255,255、0.3)の代わりにRGBAの(255,255,255.3)。

+0

申し訳ありませんが、私はすでに正しい構文を使用していますが、ここで間違って入力しました。まだ動作しません。 – suchanoob

0

あなたがプロパティをオーバーライドしたい場合は、重要です。

.navbar-custom { 
     background-color: rgb(255,255,0) !important; 
    } 
+0

それでも、同じ結果になりました。それは奇妙です... – suchanoob

+0

あなたは正しい色を選択しました – sunixi

+0

はい、色あせた白に色を設定しようとしています。ここにイメージがあります:http://i.imgur.com/4zjnLA0.png – suchanoob

0

これは完璧に機能します。実装にはいくつかのオーバーライドがあります。インスペクタの計算されたスタイルシートパネルを開き、そのプロパティを見つけます。

これは現在サポートされています:あなたがカスタムスタイルシートは、あなたの頭の中で宣言するときhttp://caniuse.com/#feat=css3-colors

.navbar-custom { 
 
    background-color: rgba(0, 255, 255, .3); 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 

 
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">NAVBAR CONTENT GOES HERE</nav>

+0

イェップ、何かが間違っています...それを見つけることは可能ですか? http://i.imgur.com/dMIWpQg.png – suchanoob

+0

chromeを使用している場合は、動作しない '.navbar-custom'要素を調べる必要があります:*右クリックして要素*を検査し、 *要素パネルで*計算された*タブをクリックし、計算された背景色を見つけ、再度クリックして適用されるルールを確認してください。 – Hitmands

+0

これは私が得たものです。 http://i.imgur.com/JBnglcw.png – suchanoob

0

は、カスタムスタイルシートは、ブートストラップ宣言の下に宣言されていることを、確認してください。例:

<link href="CSS/bootstrap.min.css" rel="stylesheet"> 
<link href="CSS/style.css" rel="stylesheet"> 

これにより、デフォルトのブートストラップ設定をカスタムスタイルで上書きできるようになります。

+0

はい、カスタムCSSスタイルシートはブートストラップの下にあります。 – suchanoob

関連する問題