我有一个以图像为背景的 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>
这是我想要的结果: