背景色合いオーバーレイの問題

Question

色付きオーバーレイを作成しようとすると背景画像に0.5不透明度のオーバーレイが表示される問題があります。

のプロパティのあるdivは、背景画像の前に表示されません。私codepenと以下のコードを参照してください。これは可能性があり、なぜ

<div class="component"> 
    <div class="container"> 
    <div class="background-image"></div> 
    </div> 
</div> 

http://codepen.io/mattsmith/pen/evzBJW

CSS

* { 
    font-family: Open Sans; 
} 

.component { 
    position: relative; 
    min-width: 126px; 
    width: 100%; 
    height: 600px; 
} 

.container { 
    position: absolute; 
    background-color: rgba(66, 66, 66, 0.5); 
    width: 100%; 
    height: 100%; 
} 

.background-image { 
    background-image: url('http://i.imgur.com/tk82k0V.png'); 
    background-position: center; 
    background-size: cover; 
    position: absolute; 

    height: 100%; 
    width: 100%; 
} 

HTMLは、誰も説明できますか？ありがとうございました。

Answer 1

.background-image（たとえば、z-index: -1）には、z-indexという負の値を設定できます。しかし、個人的に私はそれを別に構成します。すなわち、.containerに背景イメージを設定し、次に.background-imageは.overlayになります（負のZ-インデックスは必要ありません）。