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

2024-06-18 09:59| 来源: 网络整理| 查看: 265

声明：

1.该方法最实用的地方应该是标签，当做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 国际许可协议进行许可。

【本文地址】

公司简介

联系我们