CSS 如何覆盖孩子的不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21886830/
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 override opacity for a child
提问by SimonRH
I'm trying to reset the opacity to 1.0 for 'Demo text 4' where its container has opacity set to 0.3. I read that I could set the text directly using: color: rgba(255, 255, 0, 1); but this will not work for me. Is there a way to achieve my goal?
我正在尝试将“演示文本 4”的不透明度重置为 1.0，其中其容器的不透明度设置为 0.3。我读到我可以直接使用设置文本： color: rgba(255, 255, 0, 1); 但这对我不起作用。有没有办法实现我的目标？
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#text_holder {
background: blue;
width: 500px;
height: 200px;
}
#text_holder2 {
background: blue;
width: 500px;
height: 200px;
color: rgba(255, 255, 0, 1);
}
#alpha_30 {
opacity: 0.3;
color: #ff0000;
}
#alpha_100 {
color: #ff0000;
}
</style>
</head>
<body>
<div id="alpha_100">
<div id="text_holder">
<p>Demo text 1</p>
</div>
</div>
<div id="alpha_30">
<div id="text_holder">
<p>Demo text 2</p>
</div>
</div>
<div id="alpha_30">
<div id="text_holder">
<p>Demo text 3</p>
</div>
<div id="text_holder2">
<p>Demo text 4</p>
</div>
</div>
</body>
</html>
回答by G-Cyrillus
you cannot.
你不能。
If you use a plain background-color, then yes use rgba instead.
如果您使用纯背景颜色，则可以使用 rgba 代替。
#text_holder {
background:rgba(0, 0, 255,1);
width: 500px;
height: 200px;
}
#text_holder2 {
background: rgba(0, 0, 255,1);;
width: 500px;
height: 200px;
color: rgba(255, 255, 0, 1);
}
#alpha_30 > div {/* select child */
/*opacity: 0.3;*/
background:rgba(0, 0, 255,0.3);/* give opacity to bg color only */
color: #ff0000;
}
#alpha_100 {
color: #ff0000;
}
For an image as background, you may fake is opacity by using the main background-color in rgba. if you want an opacity of 0.3 for background, then do 1 -0.3 = 0.7 to set your rgba opacity.
对于作为背景的图像，您可以通过使用 rgba 中的主要背景颜色来伪造不透明度。如果您希望背景的不透明度为 0.3，则执行 1 -0.3 = 0.7 来设置您的 rgba 不透明度。
<div class="bg-img">
<p class="text_holder"> some text</p>
</div>
.bg-img {
background:url(http://lorempixel.com/100/100/abstract);
}
.bg-img .text_holder {
background:rgba(255,255,255,0.3);/* here white cause body as white background */
}
These are work around : DEMO of both (bg image at bottom of test): http://codepen.io/anon/pen/yGgpz
这些是解决方法：两者的演示（测试底部的 bg 图像）：http: //codepen.io/anon/pen/yGgpz
回答by Kevin Brown
Use rgba(225, 0, 0, .3)for the parent div.
使用rgba(225, 0, 0, .3)父DIV。
Stack Snippets example:
堆栈片段示例：
.opaque {
width: 500px;
height: 500px;
text-align: center;
color: black;
background: rgba(225, 0, 0, .5);
}<div class="opaque">This text is not opaque</div>