為什麼子元素會從父元素繼承不透明度，我該如何防止它？

解決子元素的不透明度繼承

將不透明度應用於父元素時，您可能會遇到子元素繼承此不透明度的問題。如果您希望子元素保持其原始的不透明度，這可能是不可取的。

與典型的假設相反，這個問題不僅僅是由於繼承造成的。相反，它源自於計算不透明度的方式。考慮以下範例：

<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中文網其他相關文章！