首頁 > web前端 > css教學 > 如何控制父 DIV 不透明度而不影響子 DIV 不透明度?

如何控制父 DIV 不透明度而不影響子 DIV 不透明度?

Patricia Arquette
發布: 2024-12-07 11:07:13
原創
485 人瀏覽過

How Can I Control Parent DIV Opacity Without Affecting Child DIV Opacity?

控制父級DIV 的不透明度而不影響子級DIV

在Web 開發中,在保持內容清晰度的同時實現透明效果可能具有挑戰性。一個常見的要求是在父 DIV 中設定不透明度,而不影響其子 DIV 的不透明度。

要達到此效果,您可以在父 DIV 中使用 CSS 不透明度屬性。透過將不透明度設為 0 到 1 之間的值,您可以調整父 DIV 中背景內容的透明度。

範例:

在下面的CSS 程式碼中,我們將父DI​​V的不透明度設為0.5,這樣就允許背景有50%的透明度image:

.parent {
  background-image: url(../images/madu.jpg);
  opacity: 0.5;
}
登入後複製

使用不透明度時保留子DIV顏色

要在父DIV 中設定不透明度時保留子DIV 的黑色,請使用以下命令子DIV中的CSS屬性:

.child {
  color: black;
  background-color: transparent;
}
登入後複製

透過在子DIV中指定背景顏色為透明DIV,即使具有父DIV 的透明效果,其文字的顏色也保持不變。

以上是如何控制父 DIV 不透明度而不影響子 DIV 不透明度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板