[英]transparent div over an image but opaque text
I have the following HTML code which simply shows an image with a transparent black overlay containing text. 我有以下HTML代码,它只显示一个包含文本的透明黑色叠加层的图像。
I don't wan't my text to be transparent. 我不希望我的文字透明。 I tried with
z-index
, but my text is still transparent: 我尝试使用
z-index
,但我的文字仍然是透明的:
What's wrong with my code? 我的代码出了什么问题?
This is my HTML: 这是我的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>
and this is my css: 这是我的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;
}
change the background of .hilight to rgba(0,0,0,0.65) and remove the opacity. 将.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;
}
For cross browser support use transparent 1x1 pixel png image to do this. 对于跨浏览器支持,请使用透明的1x1像素png图像来执行此操作。
You can generate the image on this site: http://www.1x1px.me/ 您可以在此站点上生成图像: http : //www.1x1px.me/
Then just remove background-color
and opacity
and simply use background:url(bg.png);
然后只需删除
background-color
和opacity
,只需使用background:url(bg.png);
You need to set the opacity to the background only, not the entire div and it's contents. 您需要将不透明度设置为仅背景,而不是整个div及其内容。 You can do this with
rgba
color selection eg 您可以使用
rgba
颜色选择来执行此操作,例如
div {
background: rgba(0,0,0,0.50);
}
The other way of doing it would be to use a semi-transparent png
image with some background-position
. 另一种方法是使用具有一些
background-position
的半透明png
图像。 This would then be multibrowser compatible 这将是多浏览器兼容的
Everything inside will have the opacity of 0.65. 里面的一切都将具有0.65的不透明度。 Move the text outside the overlay div.
将文本移动到叠加div之外。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.