带颜色的单色图像

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

希望这会有所帮助！