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

Question

У меня есть div с изображением в качестве фона. Я хочу, чтобы это изображение было монохромным в красном и черном. Возможно ли это с помощью CSS (или, возможно, Javascript)? Глядя на фильтры, я могу только найти способ показать изображение в черно-белом виде. Чтобы уточнить, я не хочу просто наложение простого цвета, к изображению в основном должна быть применена карта градиента.

Моя скрипка

Код:

.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 Linear Gradients. Но вам нужно удалить filter собственность от .bg-image,

.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%); */
}

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

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

Надеюсь это поможет!