Javascript CSS-模糊div中的模糊div问题

问题是我不能在另一个模糊元素中使用模糊元素。我有一个模糊的标题

背景过滤器：模糊（3px）具有更模糊背景的div
背景过滤器：模糊（50px），但它现在可以工作了。两个都被3px模糊了。
我需要保存结构并应用效果，请告诉我如何做到这一点




身体{
背景图片：url(https://image.freepik.com/free-vector/space-game-background-with-landscape-planet_107791-1700.jpg);
}
.标题{
背景滤镜：模糊（3px）；
填充：15px；
边框：1px实心#FFF；
}
李先生{
显示：内联块；
填充：15px 40px；
背景#ffffffb5；
背景滤镜：模糊（50px）；
}


CSS中的Background filter属性用于应用过滤效果，此行为由其所有子级继承。您可能对这种方法感兴趣


正文{
背景图片：url(https://image.freepik.com/free-vector/space-game-background-with-landscape-planet_107791-1700.jpg);
}
.标题{
背景滤镜：模糊（3px）；
填充：15px；
边框：1px实心#FFF；
}
李先生{
显示：内联块；
填充：15px 40px；
背景#ffffffb5；
背景滤镜：模糊（50px）；
}
李：以前{
内容：“；
位置：绝对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
排名：0；
左：0；
右：0；
底部：0；
宽度：100%；
身高：100%；
背景滤镜：模糊（50px）；
}
.头ul a li.模糊：：之前{
内容：“不要模糊”；
}
.header ul a li.by--50px:：before{
内容：“以50像素为单位”；
}
.头ul a li.仅限--3px:：之前{
内容：“仅3px”；
}



我不确定这是否是您要查找的结果，但使用此方法可以模糊li元素

.header ul a li {
  filter: blur(1px);
  display: inline-block;
  padding: 15px 40px;
  background: #ffffffb5;
}

它会模糊所有内容，包括文本。
这个问题看起来很相似，请查看@Firanek它看起来不相似：c在Blury div中没有Blury div，我有另一个问题..这个问题最近有一个使用伪元素的答案，可能会有帮助[链接]