声明:
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 国际许可协议进行许可。