色付きモノクローム画像

Question

画像を背景としてdivを持っています。私はこのイメージを赤と黒でモノクロにします。これはCSS（または多分Javascript）で可能ですか？フィルターを見ると、白黒の画像を表示する方法しか見つけられません。明確にするために、私は単純なカラーオーバレイを望んでいません、画像には基本的にそれに適用されるグラデーションマップが必要です。

My fiddle.

コード：

.top-field { 
 
    min-height: 300px; 
 
} 
 
.top-field .bg-image { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 100; 
 
    -webkit-filter: grayscale(100%); 
 
    -moz-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
}

<div class="top-field"> 
 
    <div class="bg-image" style="background-image: url('https://source.unsplash.com/category/nature/1600x900')"></div> 
 
</div>

これは私が欲しいの結果である：あなたが使用することができます

Answer 1

CSSリニアグラデーション。しかしfilterのプロパティを.bg-imageから削除する必要があります。

.top-field { 
 
\t min-height: 300px; 
 
} 
 

 
.top-field .bg-image { 
 
\t position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 100; 
 
/*  -webkit-filter: grayscale(100%); 
 
    -moz-filter: grayscale(100%); 
 
    filter: grayscale(100%); */ 
 
} 
 

 
.top-field:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); 
 
    z-index: 999; 
 
}

\t \t \t <div class="top-field"> 
 
\t \t \t \t <div class="bg-image" style="background-image: url('https://source.unsplash.com/category/nature/1600x900')"></div> 
 
     </div>

この情報がお役に立てば幸い！