给定一个透明的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过滤器将黑色转换为任何给定的颜色
所有功劳都归他:鼓掌:
其他回答
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>
当将一张图片从黑到白，或从白到黑时，色调旋转滤镜不起作用，因为黑色和白色在技术上不是颜色。相反，黑白颜色的变化(从黑到白或反之)必须使用invert filter属性来完成。
.img1 { 过滤器:反转(100%); ｝
你可能想看看图标字体。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 它可以免费下载。他们还提供了一些关于如何创建自己的图标字体的技巧。
你可以使用滤镜:色调旋转(Ndeg)，但如果图像是黑白的，色调将永远不会改变。
但是，你可以把它和滤镜结合起来:sepia(100)。这将为图像添加色彩，色彩旋转滤镜可以改变。
Sepia增加了一个相当不饱和的颜色，所以增强一点滤镜:饱和(50);这使得它的颜色更深，色彩旋转可以更好地工作。
然后把它们组合在一起:
滤镜:棕褐色(100)饱和(50)色调旋转(280度)
然后尝试旋转的程度，直到你找到你喜欢的颜色。
/* change image color to white */
filter: invert(100%) sepia(16%) saturate(7463%) hue-rotate(222deg) brightness(119%) contrast(115%);
/* change image color to red */`
filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(4deg) brightness(95%) contrast(118%);
/* change image color to green */
filter: invert(26%) sepia(89%) saturate(1583%) hue-rotate(95deg) brightness(96%) contrast(106%);
/* change image color to blue */
filter: invert(10%) sepia(90%) saturate(5268%) hue-rotate(245deg) brightness(109%) contrast(155%);
