html 点击图标变色,纯CSS实现小图标变色的一些研究

本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。

一、开始，关于图标变色，引言

上周写了篇文章，利用 filter:hue-rotate色调旋转滤镜改变按钮颜色 进行复制，后来我就一想，利用滤镜岂不是可以很方便改变小图标的颜色，这样，SVG图标作为背景图使用也没有任何问题了。

其实以前写过一篇文章——“ PNG格式小图标的CSS任意颜色赋色技术 ”，用的是 drop-shadow ，优点是可以任意颜色，不足就是有些小啰嗦。

所以，我要研究下，有没有使用简单的的赋色技术；以及研究下有没有滤镜以外的其它技术可以修改小图标颜色！

结果，还真发现了不少好玩的东西。

二、图标变成黑色或白色的技巧

先从简单的说起。

有下面这个图标：

如果要变成纯黑色，或者纯白色，则可以这样：

/* 图标变黑色 */

.black {

filter: brightness(0);

}

/* 图标变白色 */

.white {

filter: brightness(100);

}

也就是使用亮度滤镜，要想变成黑色，很简单，设置亮度为0即可，保证黑如焦炭；如果想要变成白色，则亮度设成很大很大的值就好了，例如100，保证白如奶昔。

实现后的效果如下截图：

三、图标变色为任意指定颜色

黑白色确实简单，但实际开发时候，往往