如何防止子元素继承父元素的 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>

以上是如何防止子元素继承父元素的 CSS 模糊效果？的详细内容。更多信息请关注PHP中文网其他相关文章！