如何在不模糊子元素的情况下模糊父 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中文网其他相关文章！