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