单色图像颜色

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>

希望这有助于！