0

我有一个以图像为背景的 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>

这是我想要的结果:

在此处输入图像描述

4

1 回答 1

0

您可以使用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>

希望这可以帮助!

于 2016-11-11T09:42:21.740 回答