如何在將不透明度應用於父元素的同時保留子元素的不透明度？

應用於父元素時保留子元素的不透明度

將不透明度應用於父元素時，不透明度屬性將由其子元素繼承。但是，在某些情況下，可能需要「取消」特定子元素的這種繼承的不透明度。

不透明度的繼承是 HTML 和 CSS 的基本行為。如果子元素的不透明度設為 1，則它將始終繼承其父元素的不透明度，無論子元素有任何後續的不透明度聲明。

解決方案

雖然不可能完全取消繼承的不透明性，但有一些替代方法可以達到類似的效果。

• 移動子元素 Юר׬ from ׄ םרָ: 透過從父元素的 DOM 層次結構，它將不再繼承父元素的不透明度。
• 使用 RGBa 顏色： 不要套用不透明度，而是對父元素的背景、邊框或文字使用 rgba 顏色。 RGBA 顏色允許透明度規範，而不影響子元素的不透明度。

範例

考慮以下程式碼：

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