在大多数浏览器中，你可以使用过滤器:

在<img>元素和其他元素的背景图像上 并在CSS中静态设置它们，或者使用JavaScript动态设置它们

请看下面的演示。

< img >元素

你可以把这个技巧应用到<img>元素上:

#original， #changed { 宽度:45%; 填充:2.5%; 浮:左; ｝ #{改变 -webkit-filter:色调旋转(180度); 滤镜:色调旋转(180度); ｝ <img id="original" src="http://i.stack.imgur.com/rfar2.jpg" /> <img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />

背景图片

你可以把这个技巧应用到背景图像上:

#original， #changed { 背景:url (http://i.stack.imgur.com/kaKzj.jpg); background-size:封面; 宽度:30%; 利润率:0 10% 0 10%; padding-bottom: 28%; 浮:左; ｝ #{改变 -webkit-filter:色调旋转(180度); 滤镜:色调旋转(180度); ｝ < div id = "原始" > < / div > < div id = "改变" > < / div >

JavaScript

你可以使用JavaScript在运行时设置一个过滤器:

var element = document.getElementById("changed"); Var过滤器= '色调-旋转(120度)饱和(2.4)'; 元素。Style ['-webkit-filter'] = filter; 元素。Style ['filter'] = filter; #original， #changed { 利润率:0 10%; 宽度:30%; 浮:左; 背景:url (http://i.stack.imgur.com/856IQ.png); background-size:封面; padding-bottom: 25%; ｝ < div id = "原始" > < / div > < div id = "改变" > < / div >

在大多数浏览器中，你可以使用过滤器:

在<img>元素和其他元素的背景图像上 并在CSS中静态设置它们，或者使用JavaScript动态设置它们

请看下面的演示。

< img >元素

你可以把这个技巧应用到<img>元素上:

#original， #changed { 宽度:45%; 填充:2.5%; 浮:左; ｝ #{改变 -webkit-filter:色调旋转(180度); 滤镜:色调旋转(180度); ｝ <img id="original" src="http://i.stack.imgur.com/rfar2.jpg" /> <img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />

背景图片

你可以把这个技巧应用到背景图像上:

#original， #changed { 背景:url (http://i.stack.imgur.com/kaKzj.jpg); background-size:封面; 宽度:30%; 利润率:0 10% 0 10%; padding-bottom: 28%; 浮:左; ｝ #{改变 -webkit-filter:色调旋转(180度); 滤镜:色调旋转(180度); ｝ < div id = "原始" > < / div > < div id = "改变" > < / div >

JavaScript

你可以使用JavaScript在运行时设置一个过滤器:

var element = document.getElementById("changed"); Var过滤器= '色调-旋转(120度)饱和(2.4)'; 元素。Style ['-webkit-filter'] = filter; 元素。Style ['filter'] = filter; #original， #changed { 利润率:0 10%; 宽度:30%; 浮:左; 背景:url (http://i.stack.imgur.com/856IQ.png); background-size:封面; padding-bottom: 25%; ｝ < div id = "原始" > < / div > < div id = "改变" > < / div >

如果你只需要一个图标，就不需要整个字体集，而且我觉得它作为一个单独的元素更“干净”。因此，出于这个目的，在HTML5中可以直接在文档流中放置SVG。然后你可以在你的.CSS样式表中定义一个类，并使用fill属性访问它的背景色:

工作小提琴: http://jsfiddle.net/qmsj0ez1/

请注意，在示例中，我使用:hover来说明行为;如果您只是想更改“正常”状态的颜色，则应该删除伪类。

如果图像像矢量图像一样简单，可以转换为SVG并在那里进行CSS更改。 另一种选择是将图像制作成PNG，并将特定的颜色更改为透明(如裁剪)，并使用CSS更改背景颜色。

我想我有一个解决方案，这是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

当将一张图片从黑到白，或从白到黑时，色调旋转滤镜不起作用，因为黑色和白色在技术上不是颜色。相反，黑白颜色的变化(从黑到白或反之)必须使用invert filter属性来完成。

.img1 { 过滤器:反转(100%); ｝