单色图像的颜色

Question

我有一个以图像为背景的div。我希望这个图像是红色和黑色的单色。这可能与css（或可能是Javascript）？看过滤器，我只能找到一种以纯黑色和白色显示图像的方法。为了澄清，我不想只是一个简单的颜色叠加，图像需要基本上有一个应用于它的渐变映射。

My fiddle.

代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是我想要的结果：

Answer 1

您可以使用 CSS线性渐变。但您需要从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>

希望这有帮助！