半透明 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;
}

所以 background-image-div 绝对应该是半透明的，但由于某种原因，内容 div 中的文本，不应该是并且不是 background-image-div 的子元素也是半透明的。当我关闭背景图像 div 的不透明度时，它似乎不在内容 div 上，同样，当我不在内容 div 上使用负边距顶部时（将其推到与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 的修改版本。重要的补充是.background-image-div上的position:relative和z-index: -1

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

在 CodePen 上：https://codepen.io/vic3685/pen/PzdEEJ