Hintergrund Farbton Overlay Problem

Question

Ich habe ein Problem mit einem Overlay von einem .5 Opazität div auf einem Hintergrundbild beim Versuch, ein getöntes Overlay zu erstellen. Das Problem ist, dass div mit der background-color Eigenschaft nicht vor dem Hintergrundbild ist. Bitte beachten Sie meine codepen und Code unten:

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

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

Kann jemand erklären, warum dies sein könnte? Vielen Dank.

Answer 1

Sie können eine negative z-index auf .background-image (z. B. z-index: -1) festlegen. Aber persönlich würde ich es anders strukturieren, das heißt, ich würde das Hintergrundbild auf .container setzen und dann .background-image wird .overlay (dann würde man keinen negativen Z-Index benötigen).