日志
PNG格式小图标的CSS任意颜色赋色技术
2018-02-06 11:00
一、眼见为实 CSS可以修改图片的颜色，没错，可以，眼见为实！您可以狠狠地点击这里：png小图标CSS赋色demo 上面的不是很黑的是原始图标，是个PNG图片，下面这个是可以赋色的： 可以变色的图标 下面，我们随意选择一个颜色，例如紫色，然后： 紫色赋色 红色赋色 是不是感觉很厉害！以后设计师就不需要在提供几套颜色的图片了。 SVG,icon fonts等技术似乎也不是那么耀眼了。 二、原理其实很简单 原理其实很简单，使用了CSS3滤镜filter中的drop-shadow，drop-shadow滤镜可以给元素或图片非透明区域添加投影。 如果对drop-shadow不是很了解，建议先看看前些时间写的“CSS3filter:drop-shadow滤镜与box-shadow区别应用”一文！ 对于背景透明的png小图标而言，如果我们施加一个不带模糊的投影，不就等同于生成了另外一个颜色的小图标了吗？ 然后，我们把原始图标隐藏在容器外面，投影图标在容器中间，不见给人感觉是赋色效果了？ 比方说本文的demo，如果把icon父级的的overflow:hidden去掉，原始的图标就暴露出来啦！ 去掉overflow:hidden之后 三、实现的时候实际有难度 原理如上面，我一开始实现的时候，以为很简单，因为分分钟可以实现自己的想法，后来发现有些天真了，Chrome浏览器怎么都显示不出来；FireFox浏览器却可以！咦，究竟发生了什么。 在Chrome浏览器下，drop-shadow有一个如下的呈现特性： 所以，我试过：
后来，灵光一现，如果我实体部分也在可视区域内，但是是透明的，会怎样呢（反正不会有投影出来）？ 于是，我就试了下曾经立下无数战功的透明边框，卧槽，又立功了，成了！ 因此，下面这一个CSS声明是千万不能少的： border-right: 20px solid transparent; 四、关于兼容性 IE13+支持，Chrome和FireFox浏览器支持，移动端iOS支持，Android4.4+支持。也就是，基本上，移动端现在可以使用这种技术了。 既节约了流量，也让我们的开发更简单，维护更方便了。 蓝蓝设计( www.lanlanwork.com)是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、 包装设计、 图标定制、 用户体验、交互设计、网站建设、平面设计服务 阅读全文 |