如何取消子元素的不透明度？

Question

我想为父级应用不透明度，但是我不希望子元素继承这种不透明度。

<div class="parent">
 <div class="child"></div>
</div>

.parent {
  opacity: 0.6;
}

有没有办法“取消”继承的不透明度？也许将其强制opacity=1用于子元素？

Answer 1

如果孩子的不透明度为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颜色用作父级的背景/边框/字体颜色，而不是不透明度，但是效果与应用不透明度不同。