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
rgba
will use the secondbackground
declaration withrgba
. - Browsers that do notwill ignore the second
background
declaration and use the.png
.
- 支持的浏览器
rgba
将使用background
带有rgba
. - 不这样做的浏览器将忽略第二个
background
声明并使用.png
.
The .png
won'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;