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

Question

我正在尝试使用 CSS 处理图像以使其成为单色(假设为“蓝白色”)。我知道如何使用 CSS 降低图像的饱和度:

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

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

Answer 1

试试这个:

使用 background-color: ... ; in rgba 在图像顶部添加手动滤镜。
向图像添加 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>