带有CSS的单色图像(不仅仅是BW)

Question

我正在尝试使用CSS处理图像以将其设置为单色（假设"蓝白色"。我知道如何用CSS降低图像饱和度：

.image img
{
filter: gray;
filter: grayscale(1);
-webkit-filter: grayscale(1); 
}

但我想让它变成黑色/白色，带有蓝色（红色，黄色......）色调。

Answer 1

试试这个：

在图像顶部添加手动过滤器，并在 rgba 中background-color: ... ;。
向图像添加grayscale和opacity滤镜。调整不透明度以获得所需的清晰度。

红

#cover, img {
    height: 300px;
    width: 400px;
    position: relative;
    display: block;
}
#cover {
    background-color: rgba(255,0,0,0.5);
    top: -300px;
}
img {
    -webkit-filter: grayscale(1) opacity(0.8) ;
    filter: grayscale(1);
}

<img src="http://www.masala.com/sites/default/files/images/2013/12/03/colours.jpg" />
<div id="cover"></div>

黄色

#cover, img {
    height: 300px;
    width: 400px;
    position: relative;
    display: block;
}
#cover {
    background-color: rgba(255,255,0,0.5);
    top: -300px;
}
img {
    -webkit-filter: grayscale(1) opacity(0.8) ;
    filter: grayscale(1);
}

<img src="http://www.masala.com/sites/default/files/images/2013/12/03/colours.jpg" />
<div id="cover"></div>

蓝

#cover, img {
    height: 300px;
    width: 400px;
    position: relative;
    display: block;
}
#cover {
    background-color: rgba(0,0,255,0.5);
    top: -300px;
}
img {
    -webkit-filter: grayscale(1) opacity(0.8) ;
    filter: grayscale(1);
}

<img src="http://www.masala.com/sites/default/files/images/2013/12/03/colours.jpg" />
<div id="cover"></div>

Answer 2

看起来这是实现它的方法。"有点"棘手，但是...看起来它做了我所追求的。

    .stuff {
   background-blend-mode: luminosity;
    background: url(ms_001.jpg) no-repeat center hsl(200,50%,50%);
    }

小提琴

Answer 3

这是一个使用 ::after 伪元素的不错解决方案。注意：我不得不将img包装在span中img因为元素仍然不支持它们。

body {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}
span {
  position: relative;
}
img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  display: block;
  border: 5px solid;
  filter: grayscale(1);
}
span::after {
  content: "";
  width: 100%;
  height: 100%;
  z-index: 5;
  position: absolute;
  background: rgba(255, 0, 0, 0.5);
  top: 0;
  left: 0;
}

<span><img src="https://ykloh2l68ra38u6ir1pvy71k-wpengine.netdna-ssl.com/wp-content/uploads/2021/06/ABSSS2_Keyart_roviocom-555x312.1875-c-center.jpg" /></span>