html - 半透明 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 绝对应该是半透明的，但出于某种原因，content div 中不应该是且不是 background-image-div 的子元素的文本也是半透明的。当我关闭 background-image-div 的不透明度时，它似乎不在内容 div 上，同样当我不在内容 div 上使用负边距顶部时(将其推到与background-image-div)，它看起来也不是半透明的。

到底是怎么回事？据我所知，这不是 WAD。这是 Chrome 中的错误吗？

Answer 1

文本不是半透明的。发生的事情是半透明图像位于您的文本之上，因此您看到的文本更亮。

这是您的 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