我不想在 CSS 中从父级继承子级不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5770341/
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
I do not want to inherit the child opacity from the parent in CSS
提问by Lion King
I do not want to inherit the child opacity from the parent in CSS.
我不想在 CSS 中从父级继承子级不透明度。
I have one div which is the parent, and I have another div inside the first div which is the child.
我有一个 div，它是父级，我在第一个 div 内有另一个 div，它是子级。
I want to set the opacity property in the parent div, but I don't want the child div to inherit the opacity property.
我想在父 div 中设置 opacity 属性，但我不希望子 div 继承 opacity 属性。
How can I do that?
我怎样才能做到这一点？
回答by Dan Blows
Instead of using opacity, set a background-color with rgba, where 'a' is the level of transparency.
不要使用不透明度，而是使用 rgba 设置背景颜色，其中“a”是透明度级别。
So instead of:
所以而不是：
background-color: rgb(0,0,255); opacity: 0.5;
use
用
background-color: rgba(0,0,255,0.5);
回答by Boris Zbarsky
Opacity is not actually inherited in CSS. It's a post-rendering group transform. In other words, if a <div>has opacity set you render the div and all its kids into a temporary buffer, and then composite that whole buffer into the page with the given opacity setting.
不透明度实际上并未在 CSS 中继承。这是一个渲染后的组转换。换句话说，如果<div>设置了不透明度，则将div 及其所有子项渲染到临时缓冲区中，然后将整个缓冲区合成到具有给定不透明度设置的页面中。
What exactly you want to do here depends on the exact rendering you're looking for, which is not clear from the question.
您到底想在这里做什么取决于您正在寻找的确切渲染，这从问题中不清楚。
回答by Louis L.
As others have mentioned in this and other similar threads, the best way to avoid this problem is to use RGBA/HSLA or else use a transparent PNG.
正如其他人在本主题和其他类似主题中提到的那样，避免此问题的最佳方法是使用 RGBA/HSLA 或使用透明的 PNG。
But, if you want a ridiculous solution, similar to the one linked in another answer in this thread (which is also my website), here's a brand new script I wrote that fixes this problem automatically, called thatsNotYoChild.js:
但是，如果您想要一个荒谬的解决方案，类似于该线程（这也是我的网站）中另一个答案中链接的解决方案，这是我编写的一个全新脚本，可以自动修复此问题，名为 thatsNotYoChild.js：
http://www.impressivewebs.com/fixing-parent-child-opacity/
http://www.impressivewebs.com/fixing-parent-child-opacity/
Basically it uses JavaScript to remove all children from the parent div, then reposition the child elements back to where they should be without actually being children of that element anymore.
基本上它使用 JavaScript 从父 div 中删除所有子元素，然后将子元素重新定位回它们应该在的位置，而不再实际成为该元素的子元素。
To me, this should be a last resort, but I thought it would be fun to write something that did this, if anyone wants to do this.
对我来说，这应该是最后的手段，但我认为如果有人想这样做，写一些这样做的东西会很有趣。
回答by tsveti_iko
A little trick if your parent is transparent and you would like your child to be the same, but defined exclusively (e.g. to overwrite the user agent styles of a select dropdown):
如果您的父母是透明的，并且您希望您的孩子是相同的，但专门定义（例如，覆盖选择下拉列表的用户代理样式），则有一个小技巧：
.parent {
background-color: rgba(0,0,0,0.5);
}
.child {
background-color: rgba(128,128,128,0);
}
回答by Aman
Opacity of child element is inherited from the parent element.
子元素的不透明度继承自父元素。
But we can use the css position property to accomplish our achievement.
但是我们可以使用 css position 属性来完成我们的成就。
The text container div can be put outside of the parent div but with absolute positioning projecting the desired effect.
文本容器 div 可以放在父 div 之外，但使用绝对定位来投影所需的效果。
Ideal Requirement------------------>>>>>>>>>>>>
理想要求------------------>>>>>>>>>>>>
HTML
HTML
<div class="container">
<div class="bar">
<div class="text">The text opacity is inherited from the parent div </div>
</div>
</div>
CSS
CSS
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
}
Output:--
输出： -
the Text is not visible because inheriting opacity from parent div.
文本不可见，因为从父 div 继承不透明度。
Solution ------------------->>>>>>
解决办法------------------->>>>>>
HTML
HTML
<div class="container">
<div class="text">Opacity is not inherited from parent div "bar"</div>
<div class="bar"></div>
</div>
CSS
CSS
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
z-index:3;
position:absolute;
top:0;
left:0;
}
Output :
输出 ：
the Text is visible with same color as of background because the div is not in the transparent div
由于 div 不在透明 div 中，因此文本以与背景相同的颜色可见
回答by Rico Letterman
The question didn't defined if the background is a color or an image but since @Blowski have already answered for coloured backgrounds, there's a hack for images below:
这个问题没有定义背景是颜色还是图像，但由于@Blowski 已经回答了彩色背景，下面的图像有一个技巧：
background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');
This way you can manipulate the color of your opacity and even add nice gradient effects.
通过这种方式，您可以操纵不透明度的颜色，甚至可以添加漂亮的渐变效果。
.wrapper {
width: 630px;
height: 420px;
display: table;
background: linear-gradient(
rgba(0,0,0,.8),
rgba(0,0,0,.8)),
url('http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg');
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}<div class="wrapper">
<h1>Question 5770341</h1>
</div>回答by Andrew Tibbetts
It seems that display: blockelements do not inherit opacity from display: inlineparents.
display: block元素似乎没有从display: inline父元素继承不透明度。
Maybe because it's invalid markup and the browser is secretly separating them? Because source doesn't show that happening. Am I missing something?
也许是因为它是无效的标记并且浏览器正在秘密地将它们分开？因为来源并没有显示这种情况发生。我错过了什么吗？
回答by 1_bug
Answers above seems to complicated for me, so I wrote this:
上面的答案对我来说似乎很复杂，所以我写了这个：
#kb-mask-overlay {
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 10000;
top: 0;
left: 0;
position: fixed;
content: "";
}
#kb-mask-overlay > .pop-up {
width: 800px;
height: 150px;
background-color: dimgray;
margin-top: 30px;
margin-left: 30px;
}
span {
color: white;
}<div id="kb-mask-overlay">
<div class="pop-up">
<span>Content of no opacity children</span>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae arcu nec velit pharetra consequat a quis sem. Vestibulum rutrum, ligula nec aliquam suscipit, sem justo accumsan mauris, id iaculis mauris arcu a eros. Donec sem urna, posuere id felis eget, pharetra rhoncus felis. Mauris tellus metus, rhoncus et laoreet sed, dictum nec orci. Mauris sagittis et nisl vitae aliquet. Sed vestibulum at orci ut tempor. Ut tristique vel erat sed efficitur. Vivamus vestibulum velit condimentum tristique lacinia. Sed dignissim iaculis mattis. Sed eu ligula felis. Mauris diam augue, rhoncus sed interdum nec, euismod eget urna.
Morbi sem arcu, sollicitudin ut euismod ac, iaculis id dolor. Praesent ultricies eu massa eget varius. Nunc sit amet egestas arcu. Quisque at turpis lobortis nibh semper imperdiet vitae a neque. Proin maximus laoreet luctus. Nulla vel nulla ut elit blandit consequat. Nullam tempus purus vitae luctus fringilla. Nullam sodales vel justo vitae eleifend. Suspendisse et tortor nulla. Ut pharetra, sapien non porttitor pharetra, libero augue dictum purus, dignissim vehicula ligula nulla sed purus. Cras nec dapibus dolor. Donec nulla arcu, pretium ac ipsum vel, accumsan egestas urna. Vestibulum at bibendum tortor, a consequat eros. Nunc interdum at erat nec ultrices. Sed a augue sit amet lacus sodales eleifend ut id metus. Quisque vel luctus arcu.
</p>
</div>kb-mask-overlayit's your (opacity) parent, pop-upit's your (no opacity) children. Everything below it's rest of your site.
kb-mask-overlay这是你的（不透明）父母，pop-up这是你的（不透明）孩子。它下面的所有内容都是您网站的其余部分。
回答by liviu blidar
There is no one size fits-all approach, but one thing that I found particularly helpful is setting opacity for a div's direct children, except for the one that you want to keep fully visible. In code:
没有一刀切的方法，但我发现特别有用的一件事是为 div 的直接子级设置不透明度，除了您希望保持完全可见的那个。在代码中：
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
and css:
和CSS：
div.parent > div:not(.child1){
opacity: 0.5;
}
In case you have background colors/images on the parent you fix color opacity with rgba and background-image by applying alpha filters
如果您在父上有背景颜色/图像，您可以通过应用 alpha 过滤器使用 rgba 和背景图像修复颜色不透明度
回答by Nicholas Zozaya
On macyou can use Previeweditor to apply opacity to a white rectangle laid over your .png image before you put it in your .css.
1) Image
Logo
2) Create a rectangle around the image
Rectanle around logo
3) Change background color to white
rectangle turned white
4) Adjust rectangle opacity
opaque image
在 Mac 上，您可以使用预览编辑器将不透明度应用于覆盖在 .png 图像上的白色矩形，然后再将其放入 .css。
1) 图像
徽标
2) 在图像
周围创建矩形徽标周围的矩形
3) 将背景颜色更改为白色
矩形变为白色
4) 调整矩形不透明度
不透明图像
