Image 多重筛选规则不适用'；你不申请吗？

我试图在背景图像上使用多个过滤器

正文{
背景图像：url（'https://picsum.photos/200/300?image=0');
滤镜：灰度（50%）模糊（3px）亮度（10%）；
}

您可以在

背景图像上使用
过滤器
属性

正文{
高度：100vh；
填充：0；
显示：网格；
对齐内容：居中对齐；
证明内容：中心；
}
.模块{
宽度：300px；
高度：300px；
显示：网格；
放置项目：中心；
颜色：#ff43ea；
位置：相对位置；
}
.模块：：之前{
内容：“；
排名：0；
左：0；
宽度：100%；
身高：100%；
位置：绝对位置；
背景图片：url(https://images.unsplash.com/photo-1494645009625-cc17363a5f20?ixlib=rb-0.3.5&q=80&fm=jpg&crop=熵&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=BD502AF39C922553E5A13624D4F40）；
背景尺寸：封面；
滤镜：灰度（100%）；
}
.内部模块{
位置：相对位置；
字体：粗体42px无衬线；
}

模块

过滤器工作正常，但背景图像已不在体内。在这里，您面对的是一个将背景值从主体传播到画布并从主体中移除的对象。换句话说，你的背景被移动到一个更高的元素，而过滤器被保留在身体上

要注意这一点，只需将背景应用于html元素，您将禁用传播效果，因此过滤器将按预期工作：

正文{
背景图像：url（'https://picsum.photos/200/300?image=0');
滤镜：灰度（50%）模糊（3px）亮度（10%）；
高度：200px；/*您需要一个高度才能看到图像*/
}
html{
背景：红色；
}

谢谢你们两位的回答，但显然我还是做错了……我的小提琴，我已经尝试了以上两种解决方案——我不知道我做错了什么，你们可以在JSFIDLE上查看它们。我有3种变体，包括这里提供的代码。。。。而且，我仍然必须能够，因为图像最终将是灰色/黑色的阴影->我仍然必须将白色文本放在上面。这应该是另一个位置：绝对…我说的对吗？tyvm:）谢谢你…我确实把它放到了一个伪类中，请看上面的小提琴…tyvm:）@ScatterBrainz你有打字错误，请检查好类的名称，是这样的sensitive@ScatterBrainz在一些fiddle中，您正在定义您没有使用的类抱歉，我输入的错误->请参见->和/或JSFIDLE没有加载url图像吗？@ScatterBrainz如果图像没有加载，请检查链接。它与我的图像配合得很好：