css3 灰色图像使用过滤器到蓝色？

Question

我正在尝试将灰色图像变成更蓝色的色调，真的不知道如何为此设置过滤器或者是否可能。

图像只有一种颜色 #cacaca ，其余透明。我正在尝试用相同的图像做一些叠加，以便它只突出显示那些彩色部分而不是透明区域。

一直在玩其中的一些但没有取得太大的成功，不知道我在颜色方面做了什么。

 .saturate {-webkit-filter: saturate(3); filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%); filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25); filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px); filter: blur(3px);}
.invert {-webkit-filter: invert(100%); filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%); filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%); filter: opacity(50%);}

原文由 Rob 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以组合使用：

• filter: sepia()
• filter: hue-rotate()
• filter: saturate()

工作示例：

 img {
width: 107px;
height: 180px;
}

img.filtered {
filter: sepia(100%) hue-rotate(190deg) saturate(500%);
}

 <img src="https://cdn.pixabay.com/photo/2015/12/16/19/16/png-1096410_960_720.png" alt="I am a plant" />

<img class="filtered" src="https://cdn.pixabay.com/photo/2015/12/16/19/16/png-1096410_960_720.png" alt="I am a plant" />

原文由 Rounin - Standing with Ukraine 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

可以通过 SVG 过滤器陷门更直接地设置颜色。

 img {
width: 107px;
height: 180px;
}

img.filtered {
filter: url(#blue-wash);
}

 <img src="https://cdn.pixabay.com/photo/2015/12/16/19/16/png-1096410_960_720.png" alt="I am a plant" />

<img class="filtered" src="https://cdn.pixabay.com/photo/2015/12/16/19/16/png-1096410_960_720.png" alt="I am a plant" />

<svg>
<filter id="blue-wash" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values="0.2 0.2 0.2 0 0   0.3 0.3 0.3 0 0  1 1 1 0 0  0 0 0 1 0"/>
</filter>
</svg>

原文由 Michael Mullany 发布，翻译遵循 CC BY-SA 4.0 许可协议