如何在不模糊子元素的情況下模糊父 Div？

模糊父級Div 時如何避免模糊子元素（無絕對定位）

使用CSS 過濾器（如模糊）模糊父級div 可能會出現不良情況也模糊子元素。不過，有一個解決方案可以將模糊效果隔離到父 div 上，而無需訴諸絕對定位。

建立內部元素

將父親 div分為兩個內部元素：

• 背景：負責模糊背景
• 內容： 包含未模糊的元素

定位元素

套用下列樣式：

• #parent_div：設定位置：相對於允許內部元素的絕對定位。
• #background: 使用position:absolute;頂部：0；右：0；底部：0；左：0； （或高度/寬度：100%）將其精確定位在父 div 上。
• #content：保持其預設位置：靜態。

套用模糊

將濾鏡：blur(3px) 或-webkit-filter:blur(3px) 套用到#background，而不是#parent_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 {
  /* No special positioning required */
}

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