h5 实现简单的png icon 换颜色效果

声明：

1.该方法最实用的地方应该是<img>标签，当做icon的简单图片

效果：

原来：

修改之后：

开始说明：

最近在搞天气调用，国家气象局的天气接口为什么不能免费，还那么贵！气气！
搜来搜去，最后选了和风天气，每日免费请求1000次。

然而和风天气的图片是这样的。

我预期的颜色是白色icon，因为是png所以没办法用style="color:#FFF;"来控制颜色，所以我考虑：

• 1、用ps修改前景色。图片一共76张，如果图片更多呢？这种方法不现实，pass掉。
• 2、然后我想，这些icon颜色单一，能不能用js获取到图片颜色（byte[]的形式）然后修改，换成自己想要的颜色。这种方法增加程序复杂度，而且代码又长、晦涩难懂，暂且搁置。有没有什么其他方法呢？
• 3、我想到了阴影！CSS3中的drop-shadow()！drop-shadow介绍

利用元素偏移，只显示阴影不就好了么。这种办法可以控制阴影的颜色，想要什么就改成什么，想一想可行！

div{
	width:100px;
	height:100px;
	overflow:hidden;
}
img{
	width:50px;
	height:50px;
	margin-left:50px;
	filter: drop-shadow(50px 0px 0rem rgb(255,255,255));
}

这样。原图片就超出隐藏了，效果实现，大成功！

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。