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的子项）也是半透明的。当我关闭background-image-div的不透明度时，它似乎不在内容div上，同样当我在内容div上没有使用负margin-top时（将它推到同一位置） background-image-div），它看起来也不是半透明的。

到底发生了什么？据我所知，这不是WAD。这是Chrome中的错误吗？

Answer 1

文字不是半透明的。发生的事情是半透明图像位于文本的顶部，因此您可以看到文本更亮。

这是CSS的修改版本。 position:relative

上的重要添加内容为z-index: -1和.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;
}

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

Answer 2

试试这个并告诉我它是如何工作的，它对我有用。

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

半透明div上的文本会导致文本半透明

2 个答案: