公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

PNG格式小图标的CSS任意颜色赋色技术

一、眼见为实

CSS可以修改图片的颜色,没错,可以,眼见为实!您可以狠狠地点击这里:png小图标CSS赋色demo

上面的不是很黑的是原始图标,是个PNG图片,下面这个是可以赋色的:

PNG格式小图标的CSS任意颜色赋色技术_www.uibq.com

下面,我们随意选择一个颜色,例如紫色,然后:
PNG格式小图标的CSS任意颜色赋色技术_www.uibq.com

PNG格式小图标的CSS任意颜色赋色技术_www.uibq.com

是不是感觉很厉害!以后设计师就不需要在提供几套颜色的图片了。

SVG, icon fonts等技术似乎也不是那么耀眼了。

二、原理其实很简单

原理其实很简单,使用了CSS3滤镜filter中的drop-shadow,drop-shadow滤镜可以给元素或图片非透明区域添加投影。

如果对drop-shadow不是很了解,建议先看看前些时间写的“CSS3 filter:drop-shadow滤镜与box-shadow区别应用”和 “CSS box-shadow属性和drop-shadow过滤器的比较”!

对于背景透明的png小图标而言,如果我们施加一个不带模糊的投影,不就等同于生成了另外一个颜色的小图标了吗?

然后,我们把原始图标隐藏在容器外面,投影图标在容器中间,不见给人感觉是赋色效果了?

比方说本文的demo,如果把icon父级的的overflow:hidden去掉,原始的图标就暴露出来啦!

PNG格式小图标的CSS任意颜色赋色技术_www.uibq.com

三、实现的时候实际有难度

原理如上面,我一开始实现的时候,以为很简单,因为分分钟可以实现自己的想法,后来发现有些天真了,Chrome浏览器怎么都显示不出来;FireFox浏览器却可以!咦,究竟发生了什么。

在Chrome浏览器下,drop-shadow有一个如下的呈现特性:

在Chrome浏览器下,如果一个元素的主体部分,无论以何种方式,只要在页面中不可见,其drop-shadow是不可见的;实体部分哪怕有1像素可见,则drop-shadow完全可见。

所以,我试过:

  • text-indent负值隐藏原始图,无投影,失败!

  • clip剪裁隐藏,无投影,失败!

  • margin负值隐藏原始图,无投影,失败!

  • left负值隐藏原始图,无投影,失败!

通通不行,实现遇到了巨大的阻碍。

关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)