为什么子元素会从父元素继承不透明度，我该如何防止它？

解决子元素的不透明度继承

将不透明度应用于父元素时，您可能会遇到子元素继承此不透明度的问题。如果您希望子元素保持其原始的不透明度，这可能是不可取的。

与典型的假设相反，这个问题不仅仅是由于继承造成的。相反，它源于计算不透明度的方式。考虑以下示例：

<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 的两倍。这在以下小提琴中很明显：https://jsfiddle.net/HUaNm/。

解决方案

解决此问题的唯一真正的解决方案是物理移动父元素之外的子元素。或者，您可以考虑对父级的背景、边框或字体使用 rgba 颜色而不是不透明度，尽管效果会有所不同。

以上是为什么子元素会从父元素继承不透明度，我该如何防止它？的详细内容。更多信息请关注PHP中文网其他相关文章！