我试图在半透明的 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 中的错误吗?
最佳答案
文本不是半透明的。发生的事情是半透明图像位于您的文本之上,因此您看到的文本更亮。
这是您的 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
关于html - 半透明 div 上的文本会导致文本半透明,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38728484/