Javascript 使用css/js切换黑白图像的颜色

我想知道你们中的一些人是否知道如何做这样的事情，在“样本”部分

他们有这样的形象：

当你点击一个图标时，它会改变图标的颜色。 这意味着拥有多个不同颜色的图像可以节省大量空间。 如果有人知道如何使这种效果，即使与不规则的图像，请告诉我在评论

---

哦，如果你知道如何使用jquery，那就更好了（我不太熟悉js）

这是一个透明的图像，他们只需更改背景颜色

---

原始图像是一个透明的png。您可以设置图像的背景色来更改颜色，如下所示：

HTML

---

苏，就这么简单。非常感谢。

<img id="present" src="http://i.stack.imgur.com/YPyIe.png" width="200">
<ul>
    <li>
        <button type="button" data-color="red">red</button>
    </li>
    <li>
        <button type="button" data-color="blue">blue</button>
    </li>
    <li>
        <button type="button" data-color="green">green</button>
    </li>
    <li>
        <button type="button" data-color="orange">orange</button>
    </li>
</ul>

$('button').on('click', function () {
    $('#present').css('background-color', $(this).data('color'));
});