通过CSS更改PNG图像的颜色？
给定一个透明的PNG显示白色的简单形状，是否有可能以某种方式通过CSS来改变这种颜色？ 某种叠加或什么不是？
你可以通过-webkit-filter和filter来使用过滤filter ：filter对于浏览器来说是非常新颖的，而且只能在非常新的浏览器中使用。 您可以将图像更改为灰度，深褐色和更多（请看示例）。
所以你现在可以用filter改变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="http://i.stack.imgur.com/OyP0g.jpg" title="original"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate"> <img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="rss opacity">
你可能想看看图标字体。 http://css-tricks.com/examples/IconFont/
编辑：我在我的最新项目上使用Font-Awesome 。 你甚至可以引导它。 简单地把它放在你的<head> ：
<link href="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它是免费下载。 他们也有一些关于如何创build自己的图标字体的提示 。
img标签与其他标签一样具有背景属性。 如果你有一个透明形状的白色PNG，就像一个模板，那么你可以这样做：
<img src= 'stencil.png' style= 'background-color: red'>
是:)
Surfin'Safari – 博客存档»CSS面具
WebKit现在支持CSS中的alpha蒙版。 蒙版允许您使用可用于在最终显示中删除该部分框的图案覆盖框的内容。 换句话说，您可以根据图像的alpha值剪切成复杂的形状。
[…]
我们引入了新的属性，为Webdevise者提供了对这些遮罩的大量控制以及如何应用这些遮罩。 新的属性类似于已经存在的背景和边框图像属性。-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)
认为我有一个这样的解决scheme，这正是5年前你正在寻找的东西，和b）比这里的其他代码选项更简单一些。
使用任何白色PNG（例如，在透明背景上的白色图标），你可以添加一个::之后select器重新着色。
.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 */ }
看到这个codepen（应用hover颜色交换）： http ://codepen.io/chrscblls/pen/bwAXZO
在大多数浏览器中 ，您可以使用filter：
-
在
<img>元素和其他元素的背景图像上 -
并将它们静态设置在CSS中，或者dynamic使用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" />
我已经能够使用SVGfilter来做到这一点。 您可以编写一个filter，将源图像的颜色与要更改的颜色相乘。 在下面的代码片段中， flood-color是我们想要改变图像颜色的颜色（在这种情况下是红色）。feComposite告诉filter我们如何处理颜色。 与算术相结合的公式为（k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4）其中i1和i2是in / in2的input颜色。 因此，仅指定k1 = 1意味着它只会执行i1 * i2，这意味着将两个input颜色相乘。
注意：这只适用于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>
如果你只需要一个图标，就不需要整个字体集，再加上我觉得它是一个单独的元素更“干净”。 所以，为此，在HTML5中，您可以直接在文档stream中放置一个SVG。 然后，您可以在.CSS样式表中定义一个类，并使用fill属性访问其背景颜色：
工作小提琴： http : //jsfiddle.net/qmsj0ez1/
请注意，在这个例子中，我用:hover来说明行为; 如果你只是想改变“正常”状态的颜色，你应该删除伪类。
我需要一个特定的颜色，所以filter不适合我。
相反，我创build了一个div，利用CSS多重背景图像和线性梯度函数（它自己创build图像）。 如果使用叠加混合模式，则实际图像将与生成的包含所需颜色的“渐变”图像混合（此处为＃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>
回答，因为我正在寻找一个解决scheme。
如果你有白色或黑色的背景，@chrscblls的答案效果很好，但我的答案不是。 另外，这些图像是用ng-repeat生成的，所以我不能在我的CSS中获得它们的URL，也不能在img标签上使用:: after。
所以，我想到了一个工作，认为如果他们在这里绊倒，可能会有帮助的人。
所以我所做的几乎与三个主要区别相同：
- 该url在我的img标签中，我把它（和一个标签）放在另一个div上，在::之后将工作。
- “混合模式”被设置为“差异”而不是“乘法”或“屏幕”。
- 我添加了一个::之前完全相同的值，所以::之后将执行“差异”由::之前，取消它自己的差异。
要将其从黑色变成白色或白色变成黑色，背景色必须是白色的。 从黑色到颜色，你可以select任何颜色。 从白色到色彩，你需要select与你想要的颜色相反的颜色。
.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: ""; }
要从字面上改变颜色，可以将CSS转换与-webkit-filter结合起来，当发生什么事情时，您将调用您select的-webkit筛选器。 例如：
img { -webkit-filter:grayscale(0%); transition: -webkit-filter .3s linear; } img:hover { -webkit-filter:grayscale(75%); }
