我找到了这个很棒的codedeen示例，您插入十六进制颜色值，它返回所需的过滤器，将此颜色应用到png

CSS过滤器生成器转换从黑色到目标十六进制颜色

例如，我需要PNG的颜色为#1a9790

然后你必须对你的PNG应用下面的过滤器

filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);

PS:代码依赖是基于这里的MultiplyByZer0的精彩回答:如何仅使用CSS过滤器将黑色转换为任何给定的颜色

所有功劳都归他:鼓掌:

你可以使用滤镜:色调旋转(Ndeg)，但如果图像是黑白的，色调将永远不会改变。

但是，你可以把它和滤镜结合起来:sepia(100)。这将为图像添加色彩，色彩旋转滤镜可以改变。

Sepia增加了一个相当不饱和的颜色，所以增强一点滤镜:饱和(50);这使得它的颜色更深，色彩旋转可以更好地工作。

然后把它们组合在一起:

滤镜:棕褐色(100)饱和(50)色调旋转(280度)

然后尝试旋转的程度，直到你找到你喜欢的颜色。

I've been able to do this using SVG filter. You can write a filter that multiplies the color of source image with the color you want to change to. In the code snippet below, flood-color is the color we want to change image color to (which is Red in this case.) feComposite tells the filter how we're processing the color. The formula for feComposite with arithmetic is (k1*i1*i2 + k2*i1 + k3*i2 + k4) where i1 and i2 are input colors for in/in2 accordingly. So specifying only k1=1 means it will do just i1*i2, which means multiplying both input colors together.

注意:这只适用于HTML5，因为它使用内联SVG。但我认为，通过将SVG放在一个单独的文件中，您可能能够在较老的浏览器中实现这一点。我还没有尝试过这种方法。

Here's the snippet: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left"> <defs> <filter id="colorMask1"> <feFlood flood-color="#ff0000" result="flood" /> <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> </defs> <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left"> <defs> <filter id="colorMask2"> <feFlood flood-color="#00ff00" result="flood" /> <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> </defs> <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left"> <defs> <filter id="colorMask3"> <feFlood flood-color="#0000ff" result="flood" /> <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> </defs> <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" /> </svg>

img标签有一个和其他标签一样的background属性。如果你有一个透明形状的白色PNG，就像一个模板，那么你可以这样做:

<img src= 'stencil.png' style= 'background-color: red'>

对我来说有效的解决方案是使用滤镜:投影

滤镜:水滴阴影的工作方式不同于常规的盒子阴影。

滤镜将阴影应用于真实形状(因此它支持透明图像)。

现在的技巧是“隐藏”真实的图像，只显示阴影。

https://jsfiddle.net/d4m8x0qb/2

请注意，我的用例是将图标的颜色修改为一种纯色，所以这种方法适合我，但可能不适用于其他用例

最简单的一句话对我很管用:

filter: opacity(0.5) drop-shadow(0 0 0 blue);

您可以将不透明度从0调整到1，以使颜色更亮或更暗。