给定一个透明的PNG显示一个简单的形状在白色，它是有可能以某种方式改变这通过CSS的颜色?某种叠加还是什么?
当前回答
你可以使用滤镜:色调旋转(Ndeg)，但如果图像是黑白的，色调将永远不会改变。
但是，你可以把它和滤镜结合起来:sepia(100)。这将为图像添加色彩，色彩旋转滤镜可以改变。
Sepia增加了一个相当不饱和的颜色，所以增强一点滤镜:饱和(50);这使得它的颜色更深，色彩旋转可以更好地工作。
然后把它们组合在一起:
滤镜:棕褐色(100)饱和(50)色调旋转(280度)
然后尝试旋转的程度，直到你找到你喜欢的颜色。
其他回答
我找到了这个很棒的codedeen示例，您插入十六进制颜色值，它返回所需的过滤器，将此颜色应用到png
CSS过滤器生成器转换从黑色到目标十六进制颜色
例如，我需要PNG的颜色为#1a9790
然后你必须对你的PNG应用下面的过滤器
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
PS:代码依赖是基于这里的MultiplyByZer0的精彩回答:如何仅使用CSS过滤器将黑色转换为任何给定的颜色
所有功劳都归他:鼓掌:
使用这个很棒的codedeen示例，您插入十六进制颜色值，它返回所需的过滤器，将此颜色应用到png
CSS过滤器生成器转换从黑色到目标十六进制颜色
例如，我需要我的png颜色为#EF8C57
然后你必须对你的PNG应用下面的过滤器 结果:
filter: invert(76%) sepia(30%) saturate(3461%) hue-rotate(321deg) brightness(98%) contrast(91%);
我需要一个特定的颜色，所以滤镜不适合我。
相反，我创建了一个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 >
你可能想看看图标字体。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度)
然后尝试旋转的程度，直到你找到你喜欢的颜色。
