如何模糊父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 不受影响，而背景模糊。

以上是如何模糊父DIV的背景而不影响子元素？的详细内容。更多信息请关注PHP中文网其他相关文章！