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

标签 javascript css html

有没有一种方法可以像在 Flash/ActionScript 中那样仅使用 HTML5/CSS/JavaScript 来更改图像的颜色?

这是一个 Flash 示例:http://www.kirupa.com/developer/actionscript/color.htm

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

最佳答案

这取决于您要做什么。

如果您只想用一种颜色覆盖图像,那么您可以在顶部放置一个 DIV,它具有所需颜色的部分透明 PNG 作为其背景图像。这是一个 JS Fiddle 演示:

http://jsfiddle.net/btCfK/

我手头没有 IE 7 的副本可以检查,但我很确定它可以在旧的 IE 中工作(无论如何晚于 6)。

此示例对叠加层和图像都使用固定大小。通过一些聪明的编码,您可以改变它,并制作一个基于 JavaScript 的控件来交换颜色进出。

如果您想要比这更复杂的东西,如果不使用 Canvas 元素、SVG 或一大堆 JavaScript,这可能是不切实际的。

关于javascript - 使用 HTML5/CSS/JS 更改图像的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10059824/

相关文章:

css - 更改页面左侧传单标记的弹出位置?

css - 多个第 n 个子语句

HTML 5 下拉菜单和 JSF 2.2

html - CSS 中的四边形梯形

javascript - jQuery UI 可排序,每个可排序的 div 包含一个 iFrame 在 FF3 中刷新但在 IE7 中不刷新

javascript - 用于 javascript 的样式化警报系统

javascript - Angular 2 中的过滤

javascript - 用于 jQuery 循环插件的 Angularjs 指令

html - 环绕式 CSS 边框动画

javascript - 仅将 CSS 应用于子 DIV