Html 在容器上设置模糊效果，但不在容器中设置特定元素

如何将

filter:blur（20px）

应用于类为

todo

的div，而不是类为

modal

的div

有可能吗，也许是在SCSS的帮助下

代码：

.todo{
显示：网格；
}
.莫代尔{
显示：网格；
位置：固定；
宽度：500px；
高度：200px；
最高：40%；
左：50%；
转换：翻译（-50%，-50%）；
背景：#fafafa；
盒影：0 6px 30px rgba（0,0,0,0.3）；
能见度：可见；
不透明度：1；
}

项目1
项目2

12345

不能“取消模糊”模糊元素的子元素

通常，通过CSS或SVG呈现元素在概念上可以被描述为元素（包括其子元素）被绘制到缓冲区（如光栅图像）中，然后该缓冲区被合成到父元素中

--

*我的

---

您只需对要模糊的元素应用

过滤器

。签出和中的anwsers。

您必须将类

modal

作为

todo

的子级删除

div

，使其位于该div的顶部。下面是有效的代码：

.todo{
显示：网格；
过滤器：模糊（20px）；
}
.莫代尔{
显示：网格；
z指数：1000；
位置：固定；
宽度：500px；
高度：200px；
最高：40%；
左：50%；
转换：翻译（-50%，-50%）；
背景：#fafafa；
盒影：0 6px 30px rgba（0,0,0,0.3）；
能见度：可见；
不透明度：1；
}

项目1
项目2

12345

您可以将模态包装在一个容器中，并使用

背景过滤器

：

.todo{
位置：相对位置；
显示：网格；
}
.集装箱{
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：固定；
排名：0；
左：0；
背景滤镜：模糊（5px）；
高度：100vh；
宽度：100%；
}
.莫代尔{
显示：网格；
宽度：500px；
高度：200px；
背景：#fafafa；
盒影：0 6px 30px rgba（0,0,0,0.3）；
能见度：可见；
不透明度：1；
}

项目1
项目2

12345

可以实现OP的要求。