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

Question

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

http://designmodo.com/flat/

他们有这张图片:

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

哦，如果你知道如何用 jquery 做到这一点，那就更好了(我对 js 不是很熟悉)

Answer 1

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

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>

Javascript

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