我有以下 HTML 代码,它只显示一个带有包含文本的透明黑色覆盖层的图像。
我不希望我的文字是透明的。我尝试使用 z-index
,但我的文本仍然是透明的:
我的代码有什么问题?
这是我的 HTML:
<div class="leftContainer">
<div class = "promo">
<img src="images/soon.png" width="415" height="200" alt="soon event" />
<div class="hilight">
<h2>Hockey</h2>
<p>Sample text</p>
</div>
</div>
...
</div>
这是我的CSS:
.hilight h2{
font-family: Helvetica, Verdana;
color: #FFF;
z-index: 200;
}
.promo {
position: relative;
}
.promo img {
z-index: 1;
}
.hilight {
background-color: #000;
position: absolute;
height: 85px;
width: 415px;
opacity: 0.65;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
bottom: 0px;
z-index: 1;
}
最佳答案
将 .hilight 的背景更改为 rgba(0,0,0,0.65) 并移除不透明度。
.hilight {
background-color: rgba(0,0,0,0.65);
position: absolute;
height: 85px;
width: 415px;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
bottom: 0px;
z-index: 1;
}
关于html - 图像上的透明 div 但文本不透明,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16679093/