给定一个透明的PNG显示一个简单的形状在白色，它是有可能以某种方式改变这通过CSS的颜色?某种叠加还是什么?
当前回答
你可以使用滤镜:色调旋转(Ndeg)，但如果图像是黑白的，色调将永远不会改变。
但是，你可以把它和滤镜结合起来:sepia(100)。这将为图像添加色彩，色彩旋转滤镜可以改变。
Sepia增加了一个相当不饱和的颜色，所以增强一点滤镜:饱和(50);这使得它的颜色更深，色彩旋转可以更好地工作。
然后把它们组合在一起:
滤镜:棕褐色(100)饱和(50)色调旋转(280度)
然后尝试旋转的程度，直到你找到你喜欢的颜色。
其他回答
对我来说有效的解决方案是使用滤镜:投影
滤镜:水滴阴影的工作方式不同于常规的盒子阴影。
滤镜将阴影应用于真实形状(因此它支持透明图像)。
现在的技巧是“隐藏”真实的图像，只显示阴影。
https://jsfiddle.net/d4m8x0qb/2
请注意，我的用例是将图标的颜色修改为一种纯色，所以这种方法适合我，但可能不适用于其他用例
如果你只需要一个图标，就不需要整个字体集，而且我觉得它作为一个单独的元素更“干净”。因此，出于这个目的，在HTML5中可以直接在文档流中放置SVG。然后你可以在你的.CSS样式表中定义一个类，并使用fill属性访问它的背景色:
工作小提琴: http://jsfiddle.net/qmsj0ez1/
请注意，在示例中，我使用:hover来说明行为;如果您只是想更改“正常”状态的颜色，则应该删除伪类。
你可能想看看图标字体。http://css-tricks.com/examples/IconFont/
编辑:我在我的最新项目中使用字体- 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 它可以免费下载。他们还提供了一些关于如何创建自己的图标字体的技巧。
我想我有一个解决方案，这是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
为了字面上改变颜色，你可以使用-webkit-filter来合并CSS转换，当有事情发生时，你可以调用你选择的-webkit-filter。例如:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
