Html 图像上的透明 div 但文本不透明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16679093/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
transparent div over an image but opaque text
提问by Pier-Alexandre Bouchard
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;
}
回答by Kerim Incedayi
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;
}
回答by Siamak A.Motlagh
For cross browser support use transparent 1x1 pixel png imageto do this.
You can generate the image on this site: http://www.1x1px.me/
Then just remove background-colorand opacityand simply use background:url(bg.png);
对于跨浏览器支持，请使用透明的 1x1 像素 png 图像来执行此操作。
您可以生成本网站上的图像：http://www.1x1px.me/
然后，只需删除background-color并opacity和简单的使用background:url(bg.png);
回答by Kevin Lynch
You need to set the opacity to the background only, not the entire div and it's contents. You can do this with rgbacolor selection eg
您只需要将不透明度设置为背景，而不是整个 div 及其内容。您可以通过rgba颜色选择来做到这一点，例如
div {
background: rgba(0,0,0,0.50);
}
The other way of doing it would be to use a semi-transparent pngimage with some background-position. This would then be multibrowser compatible
另一种方法是使用png带有一些background-position. 这将是多浏览器兼容的
回答by claustrofob
Everything inside will have the opacity of 0.65. Move the text outside the overlay div.
里面的所有东西的不透明度都是 0.65。将文本移动到覆盖 div 之外。
