给定一个以白色显示简单形状的透明 PNG，是否可以通过 CSS 以某种方式更改其颜色？某种叠加还是什么？
background-color CSS 属性。您可以创建将被固定的不透明部分，以及将通过 CSS 用您喜欢的任何颜色填充的图像的透明部分。那是你想要达到的吗？
您可以将过滤器与 -webkit-filter 和 filter 一起使用：过滤器对于浏览器来说相对较新，但根据以下 CanIUse 表，超过 90% 的浏览器都支持过滤器：https://caniuse.com/#feat=css-filters
您可以将图像更改为灰度、棕褐色等等（查看示例）。
因此，您现在可以使用过滤器更改 PNG 文件的颜色。
身体 { 背景颜色：#03030a;最小宽度：800px；最小高度：400px } img { 宽度：20%;向左飘浮;边距：0； } /*过滤器样式*/ .saturate { filter: saturate(3); } .grayscale { 过滤器：灰度（100%）； } .对比度 { 过滤器：对比度（160%）； } .brightness { 过滤器：亮度（0.25）； } .blur { 过滤器：模糊（3px）； } .invert { 过滤器：反转（100%）； } .sepia { 过滤器：棕褐色（100%）； } .huerotate { 过滤器：色相旋转（180度）； } .rss.opacity { 过滤器：不透明度（50%）； } 
我发现了这个很棒的 codepen 示例，您插入了十六进制颜色值，它返回所需的过滤器以将此颜色应用于 png
CSS filter generator to convert from black to target hex color
例如，我需要我的 png 具有以下颜色 #1a9790
那么你必须对你应用以下过滤器 png
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
PS：codepen 基于 MultiplyByZer0 的精彩回答：How to transform black into any given color using only CSS filters
所有的功劳都归他所有：拍手：
filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);
您可能想看看 Icon 字体。 http://css-tricks.com/examples/IconFont/
编辑：我在我的最新项目中使用 Font-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 可以免费下载。他们也有一些关于 how to create your very own icon fonts 的提示。
对我有用的最简单的一行：
filter: opacity(0.5) drop-shadow(0 0 0 blue);
您可以将不透明度从 0 调整到 1，以使颜色更亮或更暗。
我已经能够使用 SVG 过滤器做到这一点。您可以编写一个过滤器，将源图像的颜色与您要更改的颜色相乘。在下面的代码片段中，flood-color 是我们想要将图像颜色更改为的颜色（在本例中为红色）。feComposite 告诉过滤器我们如何处理颜色。 feComposite 的算术公式是 (k1*i1*i2 + k2*i1 + k3*i2 + k4) 其中 i1 和 i2 是相应的 in/in2 的输入颜色。因此，仅指定 k1=1 意味着它只会执行 i1*i2，这意味着将两种输入颜色相乘。
注意：这仅适用于 HTML5，因为它使用的是内联 SVG。但我认为您可以通过将 SVG 放在一个单独的文件中来使其与旧版浏览器一起工作。我还没有尝试过这种方法。
这是片段：
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> 替换为 <feComposite in="flood" in2="SourceAlpha" operator="atop"/>（适用于白色、彩色和黑色）
是的 ：）
Surfin' Safari - 博客存档 » CSS 蒙版 WebKit 现在支持 CSS 中的 alpha 蒙版。蒙版允许您使用可用于在最终显示中剔除该框的某些部分的图案覆盖框的内容。换句话说，您可以根据图像的 Alpha 剪辑成复杂的形状。 [...] 我们引入了新的属性，为 Web 设计人员提供了对这些掩码及其应用方式的大量控制。新属性类似于已经存在的背景和边框图像属性。 -webkit-mask（背景）-webkit-mask-attachment（背景-附件）-webkit-mask-clip（背景-clip）-webkit-mask-origin（背景-原点）-webkit-mask-image（背景-图像) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image)
认为我对此有一个解决方案，即 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
img 标签与其他标签一样具有背景属性。如果你有一个透明形状的白色 PNG，比如模具，那么你可以这样做：
<img src= 'stencil.png' style= 'background-color: red'>
在 most browsers 中，您可以使用过滤器：
在 元素和其他元素的背景图像上
并在您的 CSS 中静态设置它们，或使用 JavaScript 动态设置它们
请参阅下面的演示。
元素
您可以将此技术应用于 <img> 元素：
#original, #changed { 宽度：45%;填充：2.5%；向左飘浮; } #changed { -webkit-filter : hue-rotate(180deg);过滤器：色调旋转（180度）； } 
背景图片
您可以将此技术应用于背景图像：
#original, #changed { 背景： url('http://i.stack.imgur.com/kaKzj.jpg');背景尺寸：封面；宽度：30%；保证金：0 10% 0 10%；底部填充：28%；向左飘浮; } #changed { -webkit-filter : hue-rotate(180deg);过滤器：色调旋转（180度）； }
JavaScript
您可以使用 JavaScript 在运行时设置过滤器：
var element = document.getElementById("已更改"); var filter ='色调旋转（120度）饱和（2.4）'； element.style['-webkit-filter'] = 过滤器； element.style['filter'] = filter; #original, #changed { 边距：0 10%;宽度：30%；向左飘浮;背景：url('http://i.stack.imgur.com/856IQ.png');背景尺寸：封面；底部填充：25%； }
hue-rotate 不适用于白色。
当将图片从黑色变为白色或将白色变为黑色时，色调旋转滤镜不起作用，因为从技术上讲，黑色和白色不是颜色。相反，黑色和白色的颜色变化（从黑色到白色或反之亦然）必须使用反转过滤器属性来完成。
.img1 { filter: invert(100%); }
我在谷歌搜索时发现了这个，我发现最适合我的工作......
HTML
<div class="img"></div>
CSS
.img {
background-color: red;
width: 60px;
height: 60px;
-webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}
我需要一种特定的颜色，所以过滤器对我不起作用。
相反，我创建了一个 div，利用 CSS 多个背景图像和线性渐变函数（它自己创建图像）。如果您使用叠加混合模式，您的实际图像将与生成的包含所需颜色的“渐变”图像混合（此处为#BADA55）
.colored-image { 背景图像：线性渐变（向右，#BADA55，#BADA55），url（“https://i.imgur.com/lYXT8R6.png”）；背景混合模式：叠加；背景尺寸：包含；宽度：200px；高度：200px； }
使用这个伟大的 codepen 示例，您插入您的十六进制颜色值，它返回所需的过滤器以将此颜色应用于 png
CSS过滤器生成器从黑色转换为目标十六进制颜色
例如，我需要我的 png 具有以下颜色#EF8C57
那么您必须将以下过滤器应用于您的 png 结果：
filter: invert(76%) sepia(30%) saturate(3461%) hue-rotate(321deg) brightness(98%) contrast(91%);
回答是因为我正在为此寻找解决方案。
如果您有白色或黑色背景，@chrscbls 答案中的笔效果很好，但我的不是。此外，图像是用 ng-repeat 生成的，所以我的 css 中不能有它们的 url，你不能在 img 标签上使用 ::after。
所以，我想出了一个解决方法，并认为如果他们在这里绊倒，它可能会对人们有所帮助。
所以我所做的与三个主要区别几乎相同：
url 在我的 img 标签中，我将它（和一个标签）放在另一个 div 中， ::after 将在该 div 上工作。
'mix-blend-mode' 设置为 'difference' 而不是 'multiply' 或 'screen'。
我添加了一个具有完全相同值的::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: "";
}
https://codepen.io/spaceplant/pen/oZyMYG
自从我发布此答案后，我使用不同的方法制作了 an other pen：
{ 框尺寸：边框框； } 身体 { 背景颜色： CadetBlue;字体家族：“拉托”，无衬线；文本对齐：居中； } 按钮 { 显示：弹性；证明内容：中心；最小宽度：182px；填充：0.5em 1em；保证金：2em自动；光标：指针；指针事件：自动；边框半径：4px；边框：无；背景：#85b5b7；盒子阴影：0 6px #6fa8aa; } 标签 { 字体粗细：400；字体大小：24px；边距：自动 0；白颜色; } .icon { 高度：64px;宽度：64px；背景颜色：白色； -webkit-mask-repeat：不重复；掩码重复：不重复； -webkit-mask-position：左中心；掩码位置：左中心； -webkit-mask-size：自动 48px；掩码尺寸：自动 48px；掩码模式：亮度； -webkit-mask-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Bubbles-alt-icon.png/640px-Bubbles-alt-icon.png");掩码图像：url（“https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Bubbles-alt-icon.png/640px-Bubbles-alt-icon.png”）； } 按钮标签跨度 { 颜色：#395f60; } 按钮：悬停 { 颜色：#395f60;变换：平移（4px）；盒子阴影：0 2px #6fa8aa; } 按钮：悬停 .icon { 背景颜色：#395f60; }
body{ 背景：#333 url(/images/classy_fabric.png);宽度：430px；边距：0 自动；内边距：30px； } .preview{ 背景：#ccc;宽度：415px；高度：430px；边框：实心 10px #fff; } 输入 [type='radio'] { -webkit-appearance: none; -moz 外观：无；宽度：25px；高度：25px；边距：5px 0 5px 5px；背景尺寸：225px 70px；位置：相对；向左飘浮;显示：内联；顶部：0；边框半径：3px； z 指数：99999；光标：指针；盒子阴影：1px 1px 1px #000; } 输入[type='radio']:hover{ -webkit-filter: opacity(.4);过滤器：不透明度（.4）； } .red{ 背景：红色； } .red:checked{ 背景：线性渐变（棕色，红色） } .green{ 背景：绿色； } .green:checked{ 背景：线性渐变（绿色，石灰）； } .yellow{ 背景：黄色； } .yellow:checked{ 背景：线性渐变（橙色，黄色）； } .purple{ 背景：紫色； } .pink{ 背景：粉红色； } .purple:checked{ 背景：线性渐变（紫色，紫罗兰色）； } .red:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);过滤器：不透明度（.5）阴影（0 0 0红色）； } .green:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 green);过滤器：不透明度（.5）阴影（0 0 0绿色）； } .yellow:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);过滤器：不透明度（.5）阴影（0 0 0 黄色）； } .purple:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 Purple);过滤器：不透明度（.5）阴影（0 0 0紫色）； } .pink:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);过滤器：不透明度（.5）阴影（0 0 0粉色）； } img{ 宽度：394px;高度：375px；位置：相对； } .label{ 宽度：150px;高度：75px；位置：绝对；顶部：170 像素；左边距：130px； } ::selection{ 背景：#000; }
来源：https://codepen.io/taryaoui/pen/EKkcu
尝试这个：
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
如果您只需要一个图标，则不需要整个字体集，而且我觉得它作为一个单独的元素更“干净”。因此，为此目的，在 HTML5 中，您可以将 SVG 直接放置在文档流中。然后，您可以在 .CSS 样式表中定义一个类并使用 fill 属性访问其背景颜色：
工作小提琴：http://jsfiddle.net/qmsj0ez1/
请注意，在示例中，我使用了:hover来说明行为；如果您只想更改“正常”状态的颜色，则应删除伪类。
对我有用的解决方案是使用 filter: drop-shadow
过滤器：阴影的工作方式与常规 box-shadow 不同。
filter 一种将阴影应用于真实形状（因此它支持透明图像）。
现在的诀窍是“隐藏”真实图像并仅显示阴影。
https://jsfiddle.net/d4m8x0qb/2
https://i.stack.imgur.com/u5vsQ.png
请注意，我的用例是将图标颜色修改为一种纯色，因此这种方法适用于我，但可能不适用于其他用例
要从字面上更改颜色，您可以将 CSS 转换与 -webkit-filter 结合在一起，当发生某些事情时，您将调用您选择的 -webkit-filter。例如：
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
/* 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%);
.gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }这意味着你可以从黑色 &透明或灰度着色，甚至适用于动画 gif