如何在不模糊其子元素的情況下模糊 Div 的背景？

在不影響子元素的情況下模糊Div：指南

通常，當對div 應用模糊時，使用者會無意中遇到到以下挑戰：也模糊子元素。為了解決這個問題，了解 CSS 中模糊和不透明度屬性的限制非常重要。預設情況下，這些屬性會影響其中的父元素和子元素。

替代解決方案：分離內容和背景

為了避免模糊子元素，一個可行的解決方案是在父 div中建立兩個單獨的元素：一個用於背景，另一個用於背景content.

實作：

1. 設定父div的位置為「相對」。
2. 為背景建立一個子元素並設定其位置為“絕對”，頂部、右側、底部和左側值為 0（或將其高度和寬度設為100%)。
3. 將模糊或不透明度屬性套用於背景子元素。

以這種方式隔離背景，內容子元素將不會受到模糊的影響或應用於父級的不透明度div.

範例：

#parent_div {
  position: relative;
  height: 100px;
  width: 100px;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  filter: blur(3px);
  z-index: -1;
}

#content {
  /* Content properties here */
}

<div></div>

以上是如何在不模糊其子元素的情況下模糊 Div 的背景？的詳細內容。更多資訊請關注PHP中文網其他相關文章！