如何在背景图像上应用两个过滤器?

我正在建立一个固定的背景图片网站。这将是完美的,它既是灰度和模糊。

自从我自己发现 filter: blur(100%) 会模糊整个页面和它的内容,我知道我可以在一个 :before

.front-layout {
  font-family: 'Fira-Mono', 'monospace';
  min-height: 100vh;
  background: #0e0e0e fixed;
  background-size: cover;
  filter: grayscale(100%); <-- I somehow need it here
  &:before {
    content: "";
    position: absolute;
    width : 100%;
    height: 100%;
    background: inherit;
    z-index: -1;
    //filter: grayscale(100%) blur(5%); <-- What I want to achieve
    filter: blur(5px);
  }
 // Some other elements
}

仅供参考,背景图像是直接在HTML中动态设置的,这就是为什么它没有出现在这里。

不知怎的,我无法摆脱外面的过滤器 :之前 不管是什么元件,还是里面的过滤器都不起作用。总而言之,要么两者都有,要么两者都没有。

我如何才能摆脱第一个过滤器和应用两个过滤器在我的电脑 :之前 元素?

我重新创造了一个 JSFiddle 如果你运行我的代码,你不会看到任何事情发生,除非你取消注释我的评论。