應用於父元素時保留子元素的不透明度
將不透明度應用於父元素時,不透明度屬性將由其子元素繼承。但是,在某些情況下,可能需要「取消」特定子元素的這種繼承的不透明度。
不透明度的繼承是 HTML 和 CSS 的基本行為。如果子元素的不透明度設為 1,則它將始終繼承其父元素的不透明度,無論子元素有任何後續的不透明度聲明。
解決方案
雖然不可能完全取消繼承的不透明性,但有一些替代方法可以達到類似的效果。
範例
考慮以下程式碼:
<code class="html"><div class="parent"> <div class="child"></div> </div></code>
<code class="css">.parent { opacity: 0.6; }</code>
在此範例中,子元素將繼承父元素的不透明度0.6。
要「取消」此繼承,您可以對父元素的背景使用rgba 顏色:
<code class="css">.parent { background-color: rgba(255, 165, 0, 0.6); }</code>
這將導致父元素的背景為半透明,但子元素將保持完全不透明。
以上是如何在將不透明度應用於父元素的同時保留子元素的不透明度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!