如何添加一个过滤器到身体背景图片

Question

我想添加一个过滤器到身体的背景图片。 我目前使用此代码：

body { 
    background: url("/img/congruent_pentagon.png"); 
    color: white; 
    font-family: "Raleway"; 
    -webkit-filter: grayscale(1); 
} 

它使所有灰度的子元素，但不是背景图像本身。我研究了其他人做了什么，主要是人们操纵html元素。这不是我想要达到的。以这种方式添加过滤器是否可能？如果是这样，怎么样？

Answer 1

这只是工作太多相比使用Photoshop或类似的东西去饱和图像。

这就是说.... 您可以使用pseudo-element选择器。在我的情况，我添加背景，以pseudo-element:before

那么我确信这是正确的大小，并增加了一个负z-index，使其总是呈现正文的内容后面，而不是在上面。

然后我施加的滤镜。

我相信这是你想要的。

body { 
 
margin: 0 auto; 
 
} 
 

 
body:before { 
 
    background: url("https://unsplash.it/1920/?image=1062") no-repeat center; 
 
    background-size: 100%; 
 
    content: ""; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    position: fixed; 
 
    filter: grayscale(1); 
 
    z-index: -1; 
 

 
} 
 

 
.content { 
 
    opacity: .6; 
 
    height: 200px; 
 
    width: 200px; 
 
    display: inline-block; 
 
    margin: 1em; 
 
} 
 

 
/* color fluff */ 
 
.aa {background: yellow;} 
 
.bb {background: red;} 
 
.cc {background: green;} 
 
.dd {background: orange;}

<div class="container"> 
 
    <div class="content aa"></div> 
 
    <div class="content bb"></div> 
 
    <div class="content cc"></div> 
 
    <div class="content dd"></div> 
 
</div>