给定透明的PNG以白色显示简单形状，是否有可能通过CSS更改其颜色？某种覆盖还是什么？
通过CSS更改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>如果只需要一个图标，就不需要整个字体集，而且我觉得它作为一个单独的元素更“干净”。因此，为此，您可以在HTML5中将SVG直接放置在文档流中。然后，您可以在.CSS样式表中定义一个类，并使用fill属性访问其背景色：
工作提琴：http : //jsfiddle.net/qmsj0ez1/
请注意，在该示例中，我已经:hover说明了这种行为。如果您只想为“正常”状态更改颜色，则应删除伪类。
认为我对此有一个解决方案，它是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，以使颜色更浅或更深。
我已经能够使用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>我发现了这个很棒的codepen示例，您插入了十六进制颜色值，它返回了将这种颜色应用于png所需的过滤器
例如我需要我的png具有以下颜色＃1a9790
那么您必须将以下过滤器应用于png
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
您可以将过滤器与-webkit-filter和一起使用filter：过滤器相对于浏览器而言是较新的，但根据以下CanIUse表，超过90％的浏览器都支持过滤器：https ://caniuse.com/#feat=css-filters
您可以将图像更改为灰度，棕褐色等（请看示例）。
So you can now change the color of a PNG file with filters.
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">
要从字面上更改颜色，可以将CSS过渡与-webkit-filter合并，在发生某些情况时，您将调用所选的-webkit-filter。例如：