Html 当其父容器的不透明度为 50 时，如何保持文本不透明度为 100
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6446795/
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
How to keep text opacity 100 when its parent container is having opacity of 50
提问by Moksha
I have a list div which have a opacity set to 50 and inside this div I want to display some text with opacity 100,
我有一个不透明度设置为 50 的列表 div，在这个 div 中我想显示一些不透明度为 100 的文本，
Here's what I mean:
这就是我的意思：
<div id="outer">
<div id="inner">
Text
</div>
</div>
The CSS would be:
CSS 将是：
#outer {
opacity: 0.5;
}
#inner {
opacity: 1.0;
}
I tried that, but it doesn't work.
我试过了，但它不起作用。
please help
请帮忙
Regards
问候
回答by thirtydot
A simple and compatible solution is to remove all your opacity, and use:
一个简单且兼容的解决方案是删除所有opacity, 并使用：
#outer {
background: url(50%-transparent-white.png);
background: rgba(255,255,255,0.5)
}
- Browsers that support
rgbawill use the secondbackgrounddeclaration withrgba. - Browsers that do notwill ignore the second
backgrounddeclaration and use the.png.
- 支持的浏览器
rgba将使用background带有rgba. - 不这样做的浏览器将忽略第二个
background声明并使用.png.
The .pngwon't work in IE6, but that's unlikelyto be a problem. If it is, it can be resolved.
该.png不会工作在IE6，但是这不太可能是一个问题。如果是，则可以解决。
Yet another method is detailed here:
此处详细介绍了另一种方法：
回答by Thomas Shields
There's two ways to do this: One is to just set the background-color of the container to a transparent color,with rgba(r,g,b,.5)- However, this is CSS3 and only supported in newer browsers.
有两种方法可以做到这一点：一种是将容器的背景颜色设置为透明颜色，使用rgba(r,g,b,.5)- 但是，这是 CSS3，仅在较新的浏览器中受支持。
The other way is to drop an absolutely positioned div inside the container, with an opacity of .5.
另一种方法是在容器内放置一个绝对定位的 div，不透明度为 0.5。
<div class="backgroundOpacity">
My Epic Content
</div>
<br/>
<div class="backgroundDiv">
<div id="background"> </div>
My Other Epic Content
</div>
.backgroundOpacity {
background-color:rgba(0,0,0,.5);
}
.backgroundDiv {
position:relative;
}
#background {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
opacity: .5;
}
回答by Hello World
background-color: rgba(0,0,0,0.5);
回答by i4snow
You could set your outer div like this
你可以像这样设置你的外部 div
background-color: rgba(0, 0, 0, 0.8);
opacity: inherit;
background-color: rgba(0, 0, 0, 0.8);
opacity: inherit;
回答by Hadi
This can be done by a trick and it's is so easy, here is how:
这可以通过一个技巧来完成，而且非常简单，方法如下：
you wanna take the text outside of the transparent div and that's by making another div sat as position: relative;
你想把文本放在透明 div 之外，那就是让另一个 div 作为 position:relative;
