我不想在CSS中从父继承子不透明度。
我有一个div是父div，在第一个div里面有另一个div是子div。
我想在父div中设置不透明度属性，但我不希望子div继承不透明度属性。
我该怎么做呢?
当前回答
如果你的父类是透明的，并且你希望你的子类是相同的，但是是专门定义的(例如覆盖一个选择下拉菜单的用户代理样式)，有一个小技巧:
.parent {
background-color: rgba(0,0,0,0.5);
}
.child {
background-color: rgba(128,128,128,0);
}
其他回答
不要使用不透明度，使用rgba设置背景颜色，其中“a”是透明度级别。
所以不要:
background-color: rgb(0,0,255); opacity: 0.5;
use
background-color: rgba(0,0,255,0.5);
没有放之四海而皆准的方法，但我发现有一件事特别有用，那就是为div的直接子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的颜色不透明度
子元素的不透明度继承自父元素。
但是我们可以使用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
其他人试图使一个表(或其他东西)看起来集中在一行使用不透明度。就像@Blowski说的，使用颜色而不是不透明度。看看这个小提琴:http://jsfiddle.net/2en6o43d/
.table:hover > .row:not(:hover)
如果你的父类是透明的，并且你希望你的子类是相同的，但是是专门定义的(例如覆盖一个选择下拉菜单的用户代理样式)，有一个小技巧:
.parent {
background-color: rgba(0,0,0,0.5);
}
.child {
background-color: rgba(128,128,128,0);
}
