我有以下
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.65)并删除不透明度.
.hilight {
background-color: rgba(0,0.65);
position: absolute;
height: 85px;
width: 415px;
font-family: Verdana,sans-serif;
color: #FFF;
bottom: 0px;
z-index: 1;
}
