單色圖像顏色

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線性漸變。但您需要從.bg-image刪除filter財產。

.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>

希望這有助於！