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

Question

我想知道你们中的一些人是否知道如何做这样的事情，在那些说“＆＃34; swatches＆＃34;”的部分。

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'));
});

Answer 2

它是一个透明的图像，只是改变了背景颜色。

http://designmodo.com/wp-content/themes/designmodov2.1/flat-ui/images/img-4.png