最简单的一句话对我很管用:

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

您可以将不透明度从0调整到1，以使颜色更亮或更暗。

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

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

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

在<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来说明行为;如果您只是想更改“正常”状态的颜色，则应该删除伪类。

试试这个:

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

/* 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%);