ボディの背景イメージにフィルタを追加するにはどうすればいいですか？

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>