如何只使用 CSS 模糊父 Div 的背景而不影響子元素？

如何在不影響子元素的情況下模糊父級Div（僅CSS 解決方案）

將模糊或不透明度等CSS過濾器應用於父div，其中的子元素也可能受到影響。要在不使用絕對定位的情況下解決此問題，請考慮以下解決方案：

為背景和內容創建單獨的Div：

1. 在父div 中建立兩個div ：一個用於背景圖像，另一個用於內容。
2. 分配位置：相對於父級div.

絕對定位背景Div:

1. 分配位置：絕對；頂部頂部； ：0；右：0；底部：0；左：0；到用於背景圖像的div。
2. 這可確保背景 div 覆蓋整個父級 div。

在背景 Div 中加入模糊：

1. 將濾鏡：blur()屬性套用到背景div。
2. 設定z-index 為負值（例如 -1），將其放置在內容 div 後面。

範例：

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

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

<div>

使用此方法可以對背景圖片進行模糊處理，而不會影響包含內容的子div。

以上是如何只使用 CSS 模糊父 Div 的背景而不影響子元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！