Question

我正在尝试在背景图片上使用多个滤镜

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

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

Answer 1

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

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>

Answer 2

过滤器工作正常，但背景图像不再出现在体内。在这里，您面对的是special background behavior，该背景将背景值从主体传播到画布，并从主体中删除了背景。换句话说，您的背景移到了上层元素，并且滤镜保留在主体上。

要注意这一点，只需将背景应用于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%);
}

多重过滤规则不适用？

2 个答案: