如果孩子的不透明度为1,则孩子的不透明度将始终是父对象的不透明度。
继承不是问题,而是不透明度的计算方式。
例如,
<div id="parent">
<div></div>
</div>
<div id="original">
</div>
<div id="quarter">
</div>
#parent div, #quarter {
width: 100px;
height: 100px;
background-color: orange;
}
#parent div {
opacity: 0.5;
}
#parent {
opacity: 0.5;
}
#quarter {
opacity: 0.25;
}
#quarter
从您的角度来看,的不透明度与的不透明度相同#parent div
,但实际上#parent div
是的不透明度的两倍#quarter
。
避免这种情况的唯一方法是将孩子移出父母。另外,根据您的需要,也可以将rgba
颜色用作父级的背景/边框/字体颜色,而不是不透明度,但是效果与应用不透明度不同。