本文介绍了在图像上透明的div但不透明的文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下HTML代码,只是显示一个包含文本的透明黑色覆盖图片。
I have the following HTML code which simply shows an image with a transparent black overlay containing text.
我不认为我的文本是透明的。我尝试使用 z-index
,但我的文本仍然是透明的:
I don't wan't my text to be transparent. I tried with z-index
, but my text is still transparent:
我的代码有什么问题?
这是我的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)并删除不透明度。
change the background of .hilight to rgba(0,0,0,0.65) and remove the opacity.
.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;
}
这篇关于在图像上透明的div但不透明的文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!