在网页开发中常常需要变换图标的颜色，比如：在鼠标移动上去时，将图标的颜色从灰色变为蓝色。一般情况下需要准备两张图片，一张蓝色的，一张灰色的。然后根据实际需求，设置相应的CSS或JS代码。如果图标较少或变换颜色较少，上面所说的或许是一个不错的方法。但当变换的颜色多起来，往往需要准备多张图片，而这些图片只有颜色的区别。那有没有什么方法，只需要简单的代码就可以实现上述的效果。

当然有的，下面我将介绍实现的具体方法：

首先准备一张PNG格式的透明背景的图片

将这张图片放入一个嵌套结构中，外层容器可以是一个div亦或者设置外层的css样式：display：block；

然后设置外层容器的CSS样式：overflow：hidden；

最后设置内层图片的样式：

object-fit: contain; filter: drop-shadow(80px 0px #9a9a9a); transform: translateX(-80px);

随后就会发现图标的颜色变为设置的颜色了（注：这里图标的颜色取决于filter中的颜色，比如这里设置的颜色就是#9a9a9a）

原理解析：

主要原理是通过css的filter为图片添加一个名为drop-shaow的滤镜，该滤镜会对输入图像应用投影效果。

第一个参数将决定X轴偏移的方向，第二个参数将决定Y轴偏移的方向，而第三个参数将决定投影的颜色。

在案例中我设置X轴偏移80px，Y轴偏移0px，投影颜色为#9a9a9a。

此时如果图片只设置了这一条css，那么显示时，将出现两个图标，一个是默认的图标，而另一个图标则在默认图标的右侧，距离80px，同时颜色为#9a9a9a。

这不是我们想要的，我们只需要第二个图标。这时就需要设置图片的样式与外层容器的样式了。

为图片添加：transform: translateX(-80px);

那么原来第一个图片的位置上，第二个图标替换了第一个图标。但这时候图标还是有两个同时显示。所以为外层容器添加overflow：hidden。

由于图片设置了transform: translateX(-80px);，这时默认的图标已经超出了外层容器的宽度，所以默认显示的图标会被隐藏。

此时就实现了图标颜色的自由变换。可以通过css或js自由变换图标的颜色。

注意：图片的格式需要为PNG，同时彩色图标在经过设置后，将只有一种颜色，请注意。