试试这个:

 -webkit-filter: brightness(0) invert(1);
 filter: brightness(0) invert(1); 

我需要一个特定的颜色，所以滤镜不适合我。

相反，我创建了一个div，利用CSS多个背景图像和线性梯度函数(它自己创建图像)。如果你使用叠加混合模式，你的实际图像将与生成的“渐变”图像混合，包含你想要的颜色(这里，#BADA55)

.colored-image { background-image: linear-gradient(向右，#BADA55， #BADA55)， url("https://i.imgur.com/lYXT8R6.png"); background-blend-mode:覆盖; background-size:包含; 宽度:200 px; 身高:200 px; ｝ < div class = "的" > < / div >

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>

如果图像像矢量图像一样简单，可以转换为SVG并在那里进行CSS更改。 另一种选择是将图像制作成PNG，并将特定的颜色更改为透明(如裁剪)，并使用CSS更改背景颜色。

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

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

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

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

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

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

所有功劳都归他:鼓掌:

我想我有一个解决方案，这是a)正是你在5年前寻找的，b)比这里的其他代码选项更简单一点。

对于任何白色png(例如，透明背景上的白色图标)，您可以添加::after选择器来重新上色。

.icon {
    background: url(img/icon.png); /* Your icon */
    position: relative; /* Allows an absolute positioned psuedo element */
}

.icon::after{
    position: absolute; /* Positions psuedo element relative to .icon */
    width: 100%; /* Same dimensions as .icon */
    height: 100%;
    content: ""; /* Allows psuedo element to show */
    background: #EC008C; /* The color you want the icon to change to */
    mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}

查看代码依赖(在悬停上应用颜色交换):http://codepen.io/chrscblls/pen/bwAXZO