如何防止子元素繼承父元素的 CSS 模糊效果？

CSS 模糊問題：從父元素的模糊效果中排除子元素

使用CSS 將模糊濾鏡應用於父元素時，子元素不可避免地也會繼承該效果。但是，有一種解決方案可以在不使用絕對定位的情況下免除子元素的模糊性。

要實現此目的，請在父 div 中建立兩個巢狀 div：一個用於背景，另一個用於內容。將「position:relative」指派給父 div 和「position:absolute; top:0px; right:0px; Bottom:0px; left:0px;」（或將高度/寬度設為 100%）到背景 div。這可確保背景 div 完全覆蓋父 div。

將背景元素與內容元素分離，套用於背景 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;
}

<div></div>

以上是如何防止子元素繼承父元素的 CSS 模糊效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！