如何添加一個過濾器到身體背景圖片

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>