html - 如何在不模糊子元素的情况下模糊(css)div

Question

<分区>

Answer 1

当使用blur 或opacity 属性时，不可能忽略子元素。如果您将这些属性中的任何一个应用于父元素，它也会自动应用于子元素。

还有一个替代解决方案:在父级 div 中创建两个元素 – 一个 div 用于背景，另一个 div 用于内容。在父级 div 上设置 position:relative 并设置 position:absolute;顶部:0px；右:0px；底部:0px； left:0px; (或将高度/宽度设置为 100%)到背景的子元素。使用此方法，内容 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 id="parent_div">
  <div id="background"></div>
  <div id="textarea">My Text</div>
</div>

如果您看到内容被背景遮盖，请使用 the z-index property发送第二个内容 div 后面的背景。