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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

<div class="parent">
 <div class="child"></div>
</div>
.parent {
  opacity: 0.6;
}

有没有办法“取消”继承的不透明度？也许将其强制opacity=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颜色用作父级的背景/边框/字体颜色，而不是不透明度，但是效果与应用不透明度不同。

以上是 如何取消子元素的不透明度？ 的全部内容， 来源链接： utcz.com/qa/397648.html

回到顶部