多重过滤规则不适用？

Question

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

body {
  background-image: url('https://picsum.photos/200/300?image=0');
  filter: grayscale(50%) blur(3px) brightness(10%);
}

它忽略了我输入的规则......一次甚至不能做 1 个......我不能在背景图像上使用过滤器吗？

Answer 1

过滤器工作正常，但背景图像不再在体内。在这里，您面临一个special background behavior，它将背景的值从主体传播到画布，并且它已从主体中移除。换句话说，你的背景被移到了上层元素，而过滤器被保留在 body 上。

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

body {
  background-image: url('https://picsum.photos/200/300?image=0');
  filter: grayscale(50%) blur(3px) brightness(10%);
  height:200px; /*you need a height to see the image !*/
}
html {
 background:red;
}

顺便说一句，将过滤器应用于全身并不是一个好的解决方案，因为它也会影响内容。如果您只想更好地过滤图像，请考虑使用伪元素作为背景层，并且可以在不影响内容的情况下应用过滤器：

body {
  position:relative;
  z-index:0;
  height:200px; /*you need a height to see the image !*/
}
body:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: url('https://picsum.photos/200/300?image=0');
  filter: grayscale(50%) blur(3px) brightness(10%);
}

Answer 2

您可以在background-image 上使用filter 属性

body {
  height: 100vh;
  padding: 0;
  display: grid;
  align-content: center;
  justify-content: center;
}
.module {
  width: 300px;
  height: 300px;
  display: grid;
  place-items: center;
  color: #ff43ea;
  position: relative;
}
.module::before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(https://images.unsplash.com/photo-1494645009625-cc17363a5f20?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=bd502af39c922553e5a13624d4f44f40);
  background-size: cover;
  filter: grayscale(100%);
}
.module-inside {
  position: relative;
  font: bold 42px sans-serif;
}

<div class="module">
  <div class="module-inside">
    Module
  </div>
</div>