我不想从CSS的父级继承子级的不透明度。
我有一个div是父级，而我在第一个div中有另一个div是孩子。
我想在父div中设置opacity属性，但我不希望子div继承opacity属性。
我怎样才能做到这一点？
我不想从CSS的父级继承子级不透明度
第2554篇《我不想从CSS的父级继承子级不透明度》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共12个回答
通过以下方式递归为子级分配不透明度1.0：
div > div { opacity: 1.0 }
例：
div.x { opacity: 0.5 }
div.x > div.x { opacity: 1.0 }<div style="background-color: #f00; padding:20px;">
<div style="background-color: #0f0; padding:20px;">
<div style="background-color: #00f; padding:20px;">
<div style="background-color: #000; padding:20px; color:#fff">
Example Text - No opacity definition
</div>
</div>
</div>
</div>
<div style="opacity:0.5; background-color: #f00; padding:20px;">
<div style="opacity:0.5; background-color: #0f0; padding:20px;">
<div style="opacity:0.5; background-color: #00f; padding:20px;">
<div style="opacity:0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity inherited
</div>
</div>
</div>
</div>
<div class="x" style="background-color: #f00; padding:20px;">
<div class="x" style="background-color: #0f0; padding:20px;">
<div class="x" style="background-color: #00f; padding:20px;">
<div class="x" style="background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity not inherited
</div>
</div>
</div>
</div>
<div style="opacity: 0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity
</div>如果必须将图像用作透明背景，则可以使用伪元素来解决它：
html
<div class="wrap">
<p>I have 100% opacity</p>
</div>
的CSS
.wrap, .wrap > * {
position: relative;
}
.wrap:before {
content: " ";
opacity: 0.2;
background: url("http://placehold.it/100x100/FF0000") repeat;
position: absolute;
width: 100%;
height: 100%;
}
上面的答案对我来说似乎很复杂，所以我这样写：
#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-overlay是您（不透明）的父母，pop-up是您（不透明）的孩子。下方的所有内容都位于您的网站的其余部分。
没有一种适合所有人的方法，但是我发现特别有用的一件事是为div的直接子对象设置不透明度，但您要保持完全可见。在代码中：
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
和CSS：
div.parent > div:not(.child1){
opacity: 0.5;
}
如果您的父级上有背景颜色/图像，则可以通过应用Alpha滤镜使用rgba和background-image修复颜色不透明度
display: block元素似乎并没有从display: inline父母那里继承不透明性。
也许是因为它是无效的标记，并且浏览器正在秘密地将它们分开？因为消息来源没有显示出这种情况。我想念什么吗？
一个小技巧，如果您的父母是透明的，并且您希望您的孩子是相同的，但要专门定义（例如，覆盖选择下拉列表的用户代理样式）：
.parent {
background-color: rgba(0,0,0,0.5);
}
.child {
background-color: rgba(128,128,128,0);
}
就像其他人在此线程和其他类似线程中提到的那样，避免此问题的最佳方法是使用RGBA / HSLA或使用透明的PNG。
但是，如果您想要一个荒谬的解决方案，类似于该线程（也是我的网站）的另一个答案中链接的解决方案，那么我写了一个全新的脚本，该脚本可以自动解决此问题，称为thatsNotYoChild.js：
http://www.impressivewebs.com/fixing-parent-child-opacity/
基本上，它使用JavaScript从父div中删除所有子项，然后将子元素重新定位到应有的位置，而不再是该元素的子项了。
对我来说，这应该是不得已的方法，但是我认为如果有人愿意这样做的话，写点东西会很有趣。
子元素的不透明度是从父元素继承的。
但是我们可以使用css position属性来完成我们的成就。
文本容器div可以放在父div的外部，但绝对位置可以投射所需的效果。
理想要求------------------ >>>>>>>>>>>>>>
的HTML
<div class="container">
<div class="bar">
<div class="text">The text opacity is inherited from the parent div </div>
</div>
</div>
的CSS
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
}
输出：-
文本不可见，因为从父div继承了不透明度。
解决方案------------------- >>>>>>
的HTML
<div class="container">
<div class="text">Opacity is not inherited from parent div "bar"</div>
<div class="bar"></div>
</div>
的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;
}
输出：
文本与背景颜色相同，因为div不在透明div中
而不是使用不透明度，而是使用rgba设置背景色，其中“ a”是透明度级别。
所以代替：
background-color: rgb(0,0,255); opacity: 0.5;
采用
background-color: rgba(0,0,255,0.5);
不透明度实际上不是CSS所继承的。这是一个渲染后的组转换。换句话说，如果<div>设置了不透明度，则将div及其所有子对象渲染到一个临时缓冲区中，然后使用给定的不透明度设置将整个缓冲区合成到页面中。
您在这里到底想做什么取决于您要寻找的确切渲染，这个问题尚不清楚。
相似问题
问题类别
对于试图制作一张桌子（或其他东西）的其他人来说，使用不透明性看起来专注于一行。就像@Blowski所说的，使用颜色而不是不透明度。看看这个小提琴：http : //jsfiddle.net/2en6o43d/