使用 HTML5/CSS/JS 更改图像的颜色

Changing colors of an image using HTML5/CSS/JS?

本文关键字：图像 颜色 JS HTML5 CSS 使用      更新时间：2023-09-26

有没有办法像在Flash/ActionScript中那样仅使用HTML5/CSS/JavaScript来更改图像的颜色？

以下是Flash中的一个例子：http://www.kirupa.com/developer/actionscript/color.htm

据我所知，我的猜测是，这只能使用Canvas;但我想知道是否有另一种解决方案也支持IE7和IE8，而无需为IE安装Google插件。

这取决于您要做什么。

如果您只想用颜色覆盖图像，那么您可以在顶部分层一个 DIV，该 DIV 具有所需颜色的部分透明 PNG 作为其背景图像。 下面是一个 JS 小提琴演示：

http://jsfiddle.net/btCfK/

我没有方便检查的IE 7副本，但我很确定这将在较旧的IE中工作（无论如何都晚于6）。

此示例对叠加和图像都使用固定大小。 通过一些聪明的编码，你可以改变它，并创建一个基于 JavaScript 的控件来交换颜色。

如果你想要比这更复杂的东西，如果不使用 Canvas 元素、SVG 或大量的 JavaScript，它可能是不切实际的。

我偶然发现了这个问题，我想我会提到CSS过滤器。

目前，只有Chrome完全支持它们（http://caniuse.com/#feat=css-filters），但将来情况可能会有所改善。

相关文章：