是否可以使用 jquery、css 等更改图像部分的颜色

Question

我有一张显示不同烟花的图像。我想让颜色可配置，所以有一个组合框说：

1. 美国（应该将烟花染成红色、白色和蓝色）
2. 圣帕特里克节（应该给烟花涂上各种深浅不一的绿色......
3. 等。 .

我希望它看起来像这样：

或者这个：

烟花现在都是一个单一的图像，我想“混合”选定的颜色（所以对于上面的 #1，它显示红色、白色和蓝色都并排放置。（与左侧相比）图像全是蓝色，右侧全是红色等。）

所以我有一个图像，我有两个选择：

1. 为下拉列表中的每个示例创建单独的图像。
2. 看看是否有一种方法可以动态更改 html 页面中图像部分的颜色
3. 其他建议？？

我想获得关于#2 是否可行的反馈，或者我应该坚持#1。显然，随着列表变长，#1 变得更烦人，而#2 更有吸引力（如果可能的话）

Answer 1

您可以使用 png 的透明度。以您想要更改为透明的地方的方式创建烟花。然后将图像包装在一个 div 中，这将使用 javascript 更改其颜色。

下面是使用 jQuery 的示例代码

$("#green").click(function() {
    $("div").css("background", "green")
});

$("#yellow").click(function() {
    $("div").css("background", "yellow")
});

html

<div><img src="path-to-image.png"></div>

演示： http://jsfiddle.net/wyZnc/

Answer 2

我的另一个建议是将烟花作为蒙版，反转，并在包含它的框中使用底层背景颜色。

这样，您将获得您喜欢的色调，并使用单个 alpha 透明度图像。