オーバーレイボーダーは動作しますが、バックグラウンドカラーはありません

Question

私はギャラリーアイテムのオーバーレイで作業していますが、赤い枠線でターゲティングが正しく行われているかどうかを確認しますが、それはz-indexが設定されているにもかかわらず、背景色ではありません。 私はここで何が間違っていましたか？ Clearfixは違いはありません。

.gallery { 
 
    margin-top:50px; 
 
} 
 

 
.gallery-item { 
 
    padding:0px; 
 
    border:1px solid white; 
 
    z-index:101; 
 
    position:relative; 
 
} 
 

 
.gallery-item img { 
 
    position:relative; 
 
    width:100%; 
 
    z-index:101; 
 
} 
 

 
.gallery-overlay { 
 
    border:1px solid red; 
 
    background-color:rgba(255,255,255,.1); 
 
    position:relative; 
 
    width:100%; 
 
    z-index:102; 
 
} 
 

 
.gallery-caption { 
 
    height:50px; 
 
    display:none; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
<div class="gallery clearfix col-sm-10 col-sm-offset-1"> 
 
    <div class="row"> 
 
     <div class="col-sm-4 gallery-item"> 
 
      <div class="gallery-overlay"> 
 
       <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
      </div> 
 
      <p class="gallery-caption text-center">Item caption</p> 
 
     </div> 
 
     <div class="col-sm-4 gallery-item"> 
 
      <div class="gallery-overlay"> 
 
       <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
      </div> 
 
      <p class="gallery-caption text-center">Item caption</p> 
 
     </div> 
 
     <div class="col-sm-4 gallery-item"> 
 
      <div class="gallery-overlay"> 
 
       <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
      </div> 
 
      <p class="gallery-caption text-center">Item caption</p> 
 
     </div> 
 
    </div> 
 
    <!-- new row starts --> 
 
    <div class="row"> 
 
     <div class="col-sm-4 gallery-item"> 
 
      <div class="gallery-overlay"> 
 
       <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
      </div> 
 
      <p class="gallery-caption text-center">Item caption</p> 
 
     </div> 
 
     <div class="col-sm-4 gallery-item"> 
 
      <div class="gallery-overlay"> 
 
       <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
      </div> 
 
      <p class="gallery-caption text-center">Item caption</p> 
 
     </div> 
 
     <div class="col-sm-4 gallery-item"> 
 
      <div class="gallery-overlay"> 
 
       <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
      </div> 
 
      <p class="gallery-caption text-center">Item caption</p> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

あなたの問題は、背景色が作業を行うということですが、この場合の画像で、その内容によって覆われています。

イメージの上に半透明の色のウォッシュを作成するのが効果的な場合は、z-インデックスを削除し、イメージ自体にz-index: -1を追加します。そうすれば、それは親の背景色の背後にそれ自身を置くでしょう。

コードを見てください。私はすべてのzインデックスを取り出した及び/以下を追加、変更（それはより顕著にするために0.5にTEAL及び0.1からその不透明度に白から背景色を変更）：

.gallery-overlay { 
    border:1px solid red; 
    background-color:rgba(0,255,255,.5); 
    position:relative; 
    width:100%; 
} 
.gallery-overlay img { 
    z-index: -1; 
} 

.gallery { 
 
\t margin-top:50px; 
 
} 
 

 
.gallery-item { 
 
\t padding:0px; 
 
\t border:1px solid white; 
 
\t z-index:101; 
 
\t position:relative; 
 
} 
 

 
.gallery-item img { 
 
\t position:relative; 
 
\t width:100%; 
 
} 
 

 
.gallery-overlay { 
 
\t border:1px solid red; 
 
\t background-color:rgba(0,255,255,.5); 
 
\t position:relative; 
 
\t width:100%; 
 
} 
 

 
.gallery-overlay img { 
 
    z-index: -1; 
 
} 
 

 
.gallery-caption { 
 
\t height:50px; 
 
\t display:none; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div class="gallery clearfix col-sm-10 col-sm-offset-1"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <!-- new row starts --> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div>

Answer 2

あなただけの背景とbackground-colorを交換しようとしたことがありますか？このよう

：

.gallery-overlay { 
    border:1px solid red; 
    background:rgba(255,255,255,.1); 
    position:relative; 
    width:100%; 
    z-index:102; 
} 

Answer 3

は、なぜあなたはrgba(255,255,255,1)にgallery-overlayためbackground-colorを変更すると、まったく同じ視覚的な結果をもたらすであろうgallery-item imgにopacity: 0.1を追加することによって、代わりにopacityを使用しないでください。

チェック以下のコードスニペット：

.gallery { 
 
\t margin-top:50px; 
 
} 
 

 
.gallery-item { 
 
\t padding:0px; 
 
\t border:1px solid white; 
 
\t z-index:101; 
 
\t position:relative; 
 
} 
 

 
.gallery-item img { 
 
    position:relative; 
 
    width:100%; 
 
    z-index:101; 
 
    opacity: 0.1; 
 
} 
 

 
.gallery-overlay { 
 
\t border:1px solid red; 
 
\t background-color:rgba(255,255,255,1); 
 
\t position:relative; 
 
\t width:100%; 
 
\t z-index:102; 
 
} 
 

 
.gallery-caption { 
 
\t height:50px; 
 
\t display:none; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div class="gallery clearfix col-sm-10 col-sm-offset-1"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <!-- new row starts --> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-sm-4 gallery-item"> 
 
\t \t \t \t \t \t <div class="gallery-overlay"> 
 
\t \t \t \t \t \t \t <img class="img-responsive" src="http://lorempixel.com/500/500/" alt="500x500"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <p class="gallery-caption text-center">Item caption</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div>