nav bar opacity issues

Question

私は最初のサイトをブートストラップを使ってビルドしています。私は私のnavbarであるページの上部に沿って走っている逆（黒）バーを持っています。ラップトップでは見た目はいいが、ナビゲータは小さな画面で縦になって、私が持っている反応的な背景イメージ（アートワーク）をカバーしている。背景の画像がちょっと明るくなるように、上の黒いバーを十分に不透明にします。このトピックを検索しましたが、以前の回答から試したことはありません。背景が展開されている方法

：

ナビゲーションバーの定義：

<nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
     <a class="navbar-brand" style="font-family: 'Oswald', sans-serif" href="#">SITE TITLE</a> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href=#>Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Gallery</a></li> 
      <li><a href="#">Events</a></li> 
      <li><a href="#">Purchase</a><li> 

      </div> 

Answer 1

は、ANを使用して半透明のbackground-colourを作成するために、RGBA（http://www.w3schools.com/cssref/css_colors_legal.asp）を使用し、その後、bodyではなくhtmlにbackground-imageを適用しますアルファチャネルではなく、opacityを使用します。これは、メディアクエリ内で行うことができ、小さな画面デバイスにのみ適用されます。

注：お使いのnavに不透明度を適用するも半透明になってしまうのnavテキストを含め、このように、あまりにもあなたul子要素に影響を与えます。 rgbaを使用すると、選択したクラスの背景の透明度にのみ影響します。 https://jsfiddle.net/3mkajcus/1/