CSS单色图像（不仅仅是BW）

Question

我正在尝试使用CSS处理图像以将其作为单色处理（让我们说＆＃34;蓝白色＆＃34;。我知道如何使用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%);
    }

Fiddle

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>