使用CSS属性动态更改图像颜色

Question

在我的一个应用程序中，我需要动态进行UI自定义。我可以更改字体颜色，背景颜色......，但是有没有办法动态更改图像颜色而不重新加载图像。我正在使用CSS3。

Answer 1

在CSS3中，将图像从颜色或其他方式更改为灰度非常容易。您可以将filter属性应用于对象，然后使用该属性调整图像。不适用于Internet Explorer和Opera Mini（source）

img:hover.desaturate { -webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}

只需将该类应用于您想要去饱和的图像：

<img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" class="desaturate"/>

JSFiddle

Answer 2

我认为您正在寻找filter属性。 http://css-tricks.com/almanac/properties/f/filter/你可以做很多事情，但不要忘记检查浏览器兼容性。