Answers:
您可以将筛选器与-webkit-filter和一起使用filter：筛选器相对于浏览器而言是较新的，但根据以下CanIUse表，超过90％的浏览器均支持它们：https ://caniuse.com/#feat=css-filters
您可以将图像更改为灰度，棕褐色等（请看示例）。
因此，您现在可以使用滤镜更改PNG文件的颜色。
body {
background-color:#03030a;
min-width: 800px;
min-height: 400px
}
img {
width:20%;
float:left;
margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://www.pexels.com/photo/photo-of-a-green-leaf-2563743/?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">.gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }这意味着您可以从黑色，透明或灰度到彩色，甚至可以用于动画gif
我发现了这个很棒的Codepen示例，您插入了十六进制颜色值，它返回了将这种颜色应用于png所需的过滤器
例如我需要我的png具有以下颜色＃1a9790
那么您必须将以下过滤器应用于png
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);
您可能想看看图标字体。http://css-tricks.com/examples/IconFont/
编辑：我在最新的项目上使用Font-Awesome。您甚至可以引导它。只需将其放入您的<head>：
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">然后继续添加一些像这样的图标链接：
<a class="icon-thumbs-up"></a>这是完整的备忘单
- 编辑 -
Font-Awesome在新版本中使用了不同的类名，可能是因为这使CSS文件大大缩小了，并且避免了模棱两可的CSS类。所以现在您应该使用：
<a class="fa fa-thumbs-up"></a>编辑2：
刚刚发现github也使用它自己的图标字体：Octicons 可以免费下载。他们还提供了一些有关如何创建自己的图标字体的提示。
我已经能够使用SVG过滤器执行此操作。您可以编写一个滤镜，将源图像的颜色与您要更改的颜色相乘。在下面的代码片段中，泛色是我们想要将图像颜色更改为的颜色（在这种情况下为红色）。feComposite告诉滤镜我们如何处理颜色。feComposite的算术公式为（k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4）其中，i1和i2是in / in2的输入颜色。因此，仅指定k1 = 1意味着它将仅执行i1 * i2，这意味着将两种输入颜色相乘。
注意：这仅适用于HTML5，因为它使用了嵌入式SVG。但是我认为您可以通过将SVG放在单独的文件中，从而在较旧的浏览器上实现此功能。我还没有尝试过这种方法。
这是代码段：
<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'>是的
Surfin'Safari-博客存档»CSS Masks
WebKit现在支持CSS中的Alpha蒙版。遮罩使您可以用一种图案覆盖框的内容，该图案可用于在最终显示中剔除该框的某些部分。换句话说，您可以根据图像的Alpha裁剪为复杂的形状。
[...]
我们引入了新的属性，为Web设计人员提供了对这些掩码及其应用方式的大量控制。新属性类似于已经存在的背景和边框图像属性。-webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image)
在大多数浏览器中，您可以使用过滤器：
在<img>元素和其他元素的背景图像上
并在CSS中静态设置它们，或使用JavaScript动态设置它们
请参阅下面的演示。
<img> 元素您可以将此技术应用于<img>元素：
#original, #changed {
width: 45%;
padding: 2.5%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />
<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />您可以将此技术应用于背景图片：
#original, #changed {
background: url('http://i.stack.imgur.com/kaKzj.jpg');
background-size: cover;
width: 30%;
margin: 0 10% 0 10%;
padding-bottom: 28%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}<div id="original"></div>
<div id="changed"></div>您可以使用JavaScript在运行时设置过滤器：
var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;#original, #changed {
margin: 0 10%;
width: 30%;
float: left;
background: url('http://i.stack.imgur.com/856IQ.png');
background-size: cover;
padding-bottom: 25%;
}<div id="original"></div>
<div id="changed"></div>hue-rotate不适用于白色。
认为我对此有一个解决方案，它是a）恰好是您五年前所寻找的，并且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
对我有用的最简单的一行：
filter: opacity(0.5) drop-shadow(0 0 0 blue);您可以将不透明度从0调整为1，以使颜色更浅或更深。
我在谷歌搜索时发现了这个问题，发现对我最有效。
的HTML
<div class="img"></div>的CSS
.img {
background-color: red;
width: 60px;
height: 60px;
-webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}我需要特定的颜色，因此滤镜对我不起作用。
相反，我创建了一个div，利用CSS多个背景图像和线性渐变函数（该函数本身会创建一个图像）。如果使用叠加混合模式，则实际图像将与包含所需颜色的生成的“渐变”图像混合（此处为＃BADA55）
.colored-image {
background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png");
background-blend-mode: overlay;
background-size: contain;
width: 200px;
height: 200px;
}<div class="colored-image"></div>回答是因为我正在寻找解决方案。
如果背景为白色或黑色，则@chrscblls答案中的笔效果很好，但是我的却不是。另外，图片是使用ng-repeat生成的，因此我无法在CSS中添加其url，也不能在img标签上使用:: after。
因此，我想出了一个解决方案，并认为如果他们在这里太迷路，可能会有所帮助。
所以我所做的几乎相同，但有三个主要区别：
要将其从黑色更改为白色或从白色更改为黑色，背景颜色必须为白色。从黑色到颜色，您可以选择任何颜色。从白色到颜色，您需要选择所需的相反颜色。
.divClass{
position: relative;
width: 100%;
height: 100%;
text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
position: absolute;
width: 100%;
height: 100%;
background: #FFF;
mix-blend-mode: difference;
content: "";
}如果只需要一个图标，就不需要整个字体集，而且我觉得它作为一个单独的元素更“干净”。因此，为此，您可以在HTML5中将SVG直接放置在文档流中。然后，您可以在.CSS样式表中定义一个类，并使用fill属性访问其背景色：
工作提琴：http : //jsfiddle.net/qmsj0ez1/
请注意，在该示例中，我已经:hover说明了这种行为。如果只想为“正常”状态更改颜色，则应删除伪类。
body{
background: #333 url(/images/classy_fabric.png);
width: 430px;
margin: 0 auto;
padding: 30px;
}
.preview{
background: #ccc;
width: 415px;
height: 430px;
border: solid 10px #fff;
}
input[type='radio'] {
-webkit-appearance: none;
-moz-appearance: none;
width: 25px;
height: 25px;
margin: 5px 0 5px 5px;
background-size: 225px 70px;
position: relative;
float: left;
display: inline;
top: 0;
border-radius: 3px;
z-index: 99999;
cursor: pointer;
box-shadow: 1px 1px 1px #000;
}
input[type='radio']:hover{
-webkit-filter: opacity(.4);
filter: opacity(.4);
}
.red{
background: red;
}
.red:checked{
background: linear-gradient(brown, red)
}
.green{
background: green;
}
.green:checked{
background: linear-gradient(green, lime);
}
.yellow{
background: yellow;
}
.yellow:checked{
background: linear-gradient(orange, yellow);
}
.purple{
background: purple;
}
.pink{
background: pink;
}
.purple:checked{
background: linear-gradient(purple, violet);
}
.red:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
filter: opacity(.5) drop-shadow(0 0 0 red);
}
.green:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
filter: opacity(.5) drop-shadow(0 0 0 green);
}
.yellow:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
filter: opacity(.5) drop-shadow(0 0 0 yellow);
}
.purple:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
filter: opacity(.5) drop-shadow(0 0 0 purple);
}
.pink:checked ~ img{
-webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
filter: opacity(.5) drop-shadow(0 0 0 pink);
}
img{
width: 394px;
height: 375px;
position: relative;
}
.label{
width: 150px;
height: 75px;
position: absolute;
top: 170px;
margin-left: 130px;
}
::selection{
background: #000;
}<div class="preview">
<input class='red' name='color' type='radio' />
<input class='green' name='color' type='radio' />
<input class='pink' name='color' type='radio' />
<input checked class='yellow' name='color' type='radio' />
<input class='purple' name='color' type='radio' />
<img src="https://i.stack.imgur.com/bd7VJ.png"/>
</div>
background-colorCSS属性。您可以创建固定的非透明部分，以及图像的透明部分，该部分将通过CSS用您喜欢的任何颜色填充。这就是您想要实现的目标吗？