半透明のdiv上のテキストは、テキストが半透明になります

Question

半透明のdivでテキストを取得しようとしています。 Chromeに関連する場合（Chromeのバグなど）です。何らかの理由で、テキストがdivの上にあるとき（負のマージン・トップでそこに移動したとき）は、部分的に透明です。

次のようにHTMLが（これは単純化された近似値である）で次のように

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

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

CSS（これは単純化された近似値である）である：

.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; 
} 

だから、背景画像のdivは絶対にすべきです何らかの理由で、コンテンツdivのテキストがbackground-image-divの子ではなく、半透明でないテキストである必要があります。 background-image-divの不透明度をオフにすると、content divには表示されません。同様に、content divに負のmargin-topを使用しないときと同じ位置にプッシュしますbackground-image-div）、それも半透明ではありません。

正確には何が起こっていますか？私が知る限り、これはWADではない。 Chromeのバグですか？

Answer 1

これを試して、どのように動作するか教えてください。

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

テキストは半透明ではありません。起こっていることは、半透明の画像がテキストの上にあることです。そのため、テキストがより明るく表示されます。

ここにCSSの修正版があります。重要な追加がCodePenオン.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; 
} 

上position:relativeとz-index: -1です：https://codepen.io/vic3685/pen/PzdEEJ