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索引为负），并且由于该元素具有相同的（未操纵的）背景，因此该伪元素元素被有效隐藏。

如果您可以仅为伪元素设置背景，并使元素的背景保持透明，则可以这样工作，但是如果您需要使用background: inherit获取伪元素来继承父元素的背景，是通过内联样式设置的，因此无法使用这种方式。

您唯一的选择就是将您的伪元素放置在元素自身的背景与其内容之间-因此，您实际上需要以一种最简单的方式将所有内容提升“一级”-

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

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

取决于元素实际包含的内容以及这些后代本身是否以任何方式定位，它可能仅适用于此；否则您可能需要进行调整（例如，如果某些元素已经放置在其他位置，则排除它们的相对位置，和/或不覆盖它们可能已经拥有的更高的z索引。）

（{.front-layout > *已将其限制为父级的子级，树后的子孙不受影响。）

如何在背景图片上应用两个滤镜？

1 个答案: