Text über einem transluzenten div bewirkt, dass der Text transluzent ist

Question

Ich versuche Text über ein transluzentes div zu bekommen. Dies ist in Chrome, wenn das relevant ist (z. B. ein Chrome-Fehler). Aus irgendeinem Grund ist der Text, wenn der Text oben auf dem Div liegt (durch einen negativen Rand oben verschoben), auch teilweise transparent.

HTML ist wie folgt (Dies ist eine vereinfachte Näherung):

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

<div class="content"> 
    <p>Text goes here</p> 
</div> 

CSS ist wie folgt (dies ist eine vereinfachte Näherung): absolut

.background-image-div { 
    background: url(../images/Image.png) no-repeat right; 
    opacity: .5; 
} 

.content { 
    height: 480px; 
    margin-top: -271px; 
    max-width: 1200px; 
    padding-top: 15px; 
    padding-bottom: 15px; 
} 

So sollten background-image-div transparent sein, aber aus irgendeinem Grund ist der Text im Inhalts-div, der nicht sein sollte und der kein Kind von background-image-div ist, ebenfalls durchscheinend. Wenn ich die Opazität des background-image-divs deaktiviere, scheint es nicht auf dem Inhalts-div zu liegen, und ebenso, wenn ich keinen negativen margin-top auf dem content-div verwende (um es an dieselbe Position wie zu schieben) background-image-div), scheint es auch nicht durchscheinend zu sein.

Was passiert genau? Soweit ich das beurteilen kann, ist das nicht WAD. Ist es ein Fehler in Chrome?

Answer 1

Versuchen Sie dies und sagen Sie mir, wie es funktioniert, es hat für mich funktioniert.

HTML

<div id="picture"> 
    <div class="background-image-div"></div> 

    <div class="content"> 
     <p>Text goes here</p> 
    </div> 
    </div> 

CSS

.content { 
top:400px; 
left:200px; 
background-color:red; 
position:absolute; 
} 

.background-image-div { 
/*place your image in here*/ background: url('http://hk.blouinartinfo.com/sites/default/files/1349378871-56591.jpg') no-repeat; 
opacity: .5; 
background-size:cover; 
/*or whatever size you want*/ 
height:500px; 
width:500px; 
} 

Answer 2

Der Text ist nicht durchscheinend. Was passiert, ist, dass das transluzente Bild über Ihrem Text ist, so dass Sie den Text leichter sehen.

Hier ist eine modifizierte Version Ihres CSS. Die wichtige Ergänzung ist position:relative und z-index: -1 auf den .background-image-div

.content { 
    height: 480px; 
    margin-top: -271px; 
    max-width: 1200px; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    color: black; font-size: 40px; font-weight: bold; 
} 

.background-image-div { 
    position: relative; 
    z-index: -1; 
    width: 600px; 
    height: 600px; 
    background: url(https://upload.wikimedia.org/wikipedia/commons/2/21/EverestfromKalarPatarcrop.JPG) no-repeat right; 
    opacity: .5; 
} 

Auf CodePen: https://codepen.io/vic3685/pen/PzdEEJ