css - 如何在背景图像上应用两个滤镜？

Question

我正在构建一个具有固定背景图像的网站。如果它既是灰度又是模糊的，那将是完美的。

自从我自己发现放置 filter: blur(100%) 会模糊整个页面及其内容，我了解到我可以在 :before.

这是我的 SCSS:

.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 中动态设置的，这就是它没有出现在这里的原因。

不知何故，我无法摆脱 :before 元素外部的过滤器，无论它是什么，否则它内部的过滤器将无法工作。总而言之，要么两者都有，要么都不是。

如何去掉第一个过滤器并在我的 :before 元素中应用两个过滤器？

编辑

我重新创建了一个 JSFiddle为了提供更多上下文，如果您运行我的代码，除非您取消注释我的评论，否则您不会看到任何事情发生。

提前致谢

Answer 1

::before 伪元素隐藏在元素本身后面(因为 z-index 为负)，并且因为该元素具有相同的(未操作的) ) 背景，伪元素被有效隐藏。

它会这样工作，如果你可以只为伪元素设置背景，并保持元素的背景透明 - 但如果你需要使用 background: inherit 来获得伪元素继承通过内联样式设置的父背景，它不能这样工作。

然后你唯一的选择是让你的伪元素定位在元素自己的背景和它的内容之间 - 所以你需要有效地将所有内容“提升一个级别” - 以最简单的方式可以使用

.front-layout > * {
  position: relative;
  z-index: 1;
}

https://jsfiddle.net/9sfqd7te/6/

根据元素实际包含的内容，以及这些后代本身是否以任何方式定位，它可能只适用于此；或者您可能必须进行调整(例如，如果某些元素已经以其他方式定位，则将它们排除在应用相对位置之外，和/或不覆盖它们可能已经具有的更高 z-index。)

(.front-layout > * 已经将此限制为父级的子级，树下更远的后代不受影响。)