如何模糊父DIV的背景而不影響子元素？

模糊DIV 背景而不影響子元素（避免絕對定位）

將模糊或不透明效果應用於父DIV 元素時，也會影響子元素。為了避免這種情況，需要一個創造性的解決方案。

替代解決方案

在父容器中建立兩個子DIV：

• 背景DIV:絕對定位在父級內（頂部：0px；右側：0px；底部：0px；左側：0px；或100% 寬度/高度）
• 內容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;
}

#content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div>透過這種方法，內容DIV不受影響，而背景模糊。 <p></p>
</div>

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