通过CSS更改PNG图像的颜色？

如果一个透明的PNG以白色显示一个简单的形状，有可能通过CSS改变这个形状的颜色吗？是否有某种覆盖物？

是：）

WebKit现在支持CSS中的alpha掩码。遮罩允许您使用图案覆盖方框的内容，该图案可用于在最终显示中删除方框的部分。换句话说，您可以根据图像的alpha剪裁为复杂形状。
[…]
我们引入了新的属性，为Web设计师提供了对这些遮罩及其应用方式的大量控制。新属性类似于已经存在的背景和边框图像属性

-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)

---

img标记与其他标记一样具有background属性。如果您有一个带有透明形状（如模具）的白色PNG，则可以执行以下操作：

<img src= 'stencil.png' style= 'background-color: red'>

---

您可能想看看图标字体

编辑：我正在使用我的最新项目。你甚至可以引导它。只需将其放入您的

：

然后继续添加一些图标链接，如下所示：

<a class="icon-thumbs-up"></a>

--编辑--

Font Awesome在新版本中使用了不同的类名，可能是因为这使CSS文件大大缩小，并避免了不明确的CSS类。
因此，现在您应该使用：

<a class="fa fa-thumbs-up"></a>


可以免费下载。它们还提供了一些提示。
您可以将过滤器与
-webkit-filter
和
过滤器一起使用：
过滤器对于浏览器来说相对较新，但根据下表，超过90%的浏览器支持过滤器：

您可以将图像更改为灰度、深褐色和更多颜色（参见示例）

因此您现在可以使用过滤器更改PNG文件的颜色。


正文{
背景色：#03030a；
最小宽度：800px；
最小高度：400px
}
img{
宽度：20%；
浮动：左；
保证金：0；
}
/*过滤器样式*/
.饱和{滤波器：饱和（3）；}
.grayscale{filter:灰度（100%）；}
对比度{过滤器：对比度（160%）；}
.亮度{过滤器：亮度（0.25）；}
.blur{filter:blur（3px）；}
.invert{filter:invert（100%）；}
.sepia{过滤器：sepia（100%）；}
.huerotate{过滤器：色调旋转（180度）；}
.rss.opacity{filter:opacity（50%）；}
如果只需要一个图标，就不需要整个字体集，而且我觉得它作为一个单独的元素更“干净”。因此，在HTML5中，可以将SVG直接放在文档流中。然后，您可以在.CSS样式表中定义一个类，并使用
fill
属性访问其背景色：

工作小提琴：

注意，在这个示例中，我使用了
：hover
来说明行为；如果您只是想更改“正常”状态的颜色，那么应该删除伪类。
要真正更改颜色，您可以将CSS转换与-webkit过滤器合并，在出现问题时，您可以调用您选择的-webkit过滤器。例如：

img {
    -webkit-filter:grayscale(0%);
    transition: -webkit-filter .3s linear;
    }
img:hover 
    {
    -webkit-filter:grayscale(75%);
    }

我已经能够使用SVG过滤器实现这一点。您可以编写一个过滤器，将源图像的颜色与要更改的颜色相乘。在下面的代码段中，flood color是我们要将图像颜色更改为的颜色（在本例中为红色）。feComposite告诉过滤器我们如何处理颜色。带算术的feComposite的公式是（k1*i1*i2+k2*i1+k3*i2+k4），其中i1和i2是in/in2的相应输入颜色。因此，仅指定k1=1意味着它将只执行i1*i2，这意味着将两种输入颜色相乘

注意：这只适用于HTML5，因为它使用的是内嵌SVG。但我认为，通过将SVG放在一个单独的文件中，您可能可以在较旧的浏览器中实现这一点。我还没有尝试过那种方法

以下是片段：

在中，您可以使用过滤器：


在两个
我想我有一个解决方案，这就是a）5年前你一直在寻找的，b）比这里的其他代码选项简单一点

对于任何白色png（例如，透明背景上的白色图标），您都可以向Recor添加：：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 */
}

查看此代码笔（在悬停时应用颜色交换）：
回答，因为我正在寻找解决方案

如果你有白色或黑色的背景，@chrscblls answer中的笔很好用，但我的笔不行。同样，这些图像是使用ng repeat生成的，所以我不能在css中使用它们的url，也不能在img标记上使用：：after

所以，我想出了一个解决办法，并认为如果人们在这里也遇到挫折，它可能会对他们有所帮助

因此，我所做的基本相同，但有三个主要区别：


url位于我的img标记中，我将它（和一个标签）放在另一个div中，在该div中：：after将起作用
“混合混合模式”设置为“差异”，而不是“倍增”或“屏幕”
我使用完全相同的值添加了：：before，因此：：after将对：：before产生的“差异”进行“差异”，并自行取消它

要将其从黑色更改为白色或从白色更改为黑色，背景色必须为白色。
从黑色到彩色，您可以选择任何颜色。
从白色到其他颜色，你需要选择与你想要的颜色相反的颜色

.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: "";
}

我需要一种特定的颜色，所以过滤器对我不起作用

相反，我创建了一个div，利用CSS多个背景图像和线性梯度函数（创建图像本身）。如果使用叠加混合模式，实际图像将与生成的包含所需颜色的“渐变”图像混合（此处为#BADA55）


。彩色图像{
背景图像：线性渐变（向右，#BADA55，#BADA55），url（“https://i.imgur.com/lYXT8R6.png");
背景混合模式：叠加；
背景尺寸：
.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: "";
}

filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);

<div class="img"></div>

.img {
  background-color: red;
  width: 60px;
  height: 60px;
   -webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}

filter: opacity(0.5) drop-shadow(0 0 0 blue);

 -webkit-filter: brightness(0) invert(1);
 filter: brightness(0) invert(1);