Монохромное изображение с цветом

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>

Надеется, что это помогает!