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

Question

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

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

我希望它看起来像这样:

或者这个:

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

所以我有一张图片，我有两个选择:

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

我想就#2 是否可行或我应该坚持#1 获得反馈。显然随着列表变长，#1 变得更烦人而#2 更吸引人(如果可能的话)

Answer 1

我的另一个建议是将烟花作为 mask ，倒置，并在容纳它的盒子中使用底层背景颜色。

这样一来，您就可以通过单个 alpha 透明图像获得您喜欢的色调。