I've been able to do this using SVG filter. You can write a filter that multiplies the color of source image with the color you want to change to. In the code snippet below, flood-color is the color we want to change image color to (which is Red in this case.) feComposite tells the filter how we're processing the color. The formula for feComposite with arithmetic is (k1*i1*i2 + k2*i1 + k3*i2 + k4) where i1 and i2 are input colors for in/in2 accordingly. So specifying only k1=1 means it will do just i1*i2, which means multiplying both input colors together.

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

Here's the snippet: <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>

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

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

body{ background: #333 url(/images/classy_fabric.png); width: 430px; margin: 0 auto; padding: 30px; } .preview{ background: #ccc; width: 415px; height: 430px; border: solid 10px #fff; } input[type='radio'] { -webkit-appearance: none; -moz-appearance: none; width: 25px; height: 25px; margin: 5px 0 5px 5px; background-size: 225px 70px; position: relative; float: left; display: inline; top: 0; border-radius: 3px; z-index: 99999; cursor: pointer; box-shadow: 1px 1px 1px #000; } input[type='radio']:hover{ -webkit-filter: opacity(.4); filter: opacity(.4); } .red{ background: red; } .red:checked{ background: linear-gradient(brown, red) } .green{ background: green; } .green:checked{ background: linear-gradient(green, lime); } .yellow{ background: yellow; } .yellow:checked{ background: linear-gradient(orange, yellow); } .purple{ background: purple; } .pink{ background: pink; } .purple:checked{ background: linear-gradient(purple, violet); } .red:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 red); filter: opacity(.5) drop-shadow(0 0 0 red); } .green:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 green); filter: opacity(.5) drop-shadow(0 0 0 green); } .yellow:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow); filter: opacity(.5) drop-shadow(0 0 0 yellow); } .purple:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple); filter: opacity(.5) drop-shadow(0 0 0 purple); } .pink:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink); filter: opacity(.5) drop-shadow(0 0 0 pink); } img{ width: 394px; height: 375px; position: relative; } .label{ width: 150px; height: 75px; position: absolute; top: 170px; margin-left: 130px; } ::selection{ background: #000; } <div class="preview"> <input class='red' name='color' type='radio' /> <input class='green' name='color' type='radio' /> <input class='pink' name='color' type='radio' /> <input checked class='yellow' name='color' type='radio' /> <input class='purple' name='color' type='radio' /> <img src="https://i.stack.imgur.com/bd7VJ.png"/> </div>

来源:https://codepen.io/taryaoui/pen/EKkcu

对我来说有效的解决方案是使用滤镜:投影

滤镜:水滴阴影的工作方式不同于常规的盒子阴影。

滤镜将阴影应用于真实形状(因此它支持透明图像)。

现在的技巧是“隐藏”真实的图像，只显示阴影。

https://jsfiddle.net/d4m8x0qb/2

请注意，我的用例是将图标的颜色修改为一种纯色，所以这种方法适合我，但可能不适用于其他用例

试试这个:

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

你可能想看看图标字体。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 它可以免费下载。他们还提供了一些关于如何创建自己的图标字体的技巧。