CSS修改png图标颜色

首先介绍一下,css3中有两个属性可设置投影,分别是:

box-shadow:x偏移, y偏移, 模糊大小, 色值;
filter:drop-shadow(x偏移, y偏移, 模糊大小, 色值)

二者有什么区别?

1. 兼容性

box-shadow:从IE9+开始兼容


box-shadow兼容性

filter:drop-shadow:从IE13+兼容


drop-shadow兼容性

从上图可知,box-shadow在兼容性上做的更好。而drop-shadow还只能在新版本的浏览器中使用,对老旧浏览器并不友好

2. 阴影叠加

filter:drop-shadow不支持阴影叠加

阴影叠加是你可以对一个元素重复进行阴影设置,使用box-shadow可以极限叠加,不考虑性能的话,甚至可以拼出你想要的任何形状。

关于box-shadow阴影叠加属性可以点击这里box-shadow阴影叠加技术应用

3. 内阴影

filter:drop-shadow不支持内阴影

3. 阴影效果

为了展示,我这里使用虚线形式的边框查看效果

    height: 25px;
    width: 30px;
    border:3px dashed #666;

box-shadow:

 box-shadow: 5px 5px 0; 
box-shadow投影效果

drop-shadow:

filter:drop-shadow(5px 5px 0);
drop-shadow投影效果

从这两张图可以初见端倪了对吗?

drop-shadow实际应用

重头戏来了,从二者的阴影效果上可以看出,box-shadow本质上是盒模型的投影,而drop-shadow才是真正意义上的投影。

所以,纵然drop-shadow有着对兼容性要求高,无法设置内阴影,无法叠加阴影等很多不足,但它的特性决定了它无法被box-shadow取代的地位。

1. 不规则图形的投影

这个好理解,使用标签和css构造的多边形,如三角形、或者上面写的虚线边框等,就可以使用drop-shadow为它设置自然的投影

2. 升级功能:改变图标颜色
<i class="icon">
    <i class="icon-del"></i>
</i>

对于上述html结构,我们想要插入一个黑色的定位图标。而目前的素材只有一个蓝色的图标


location.png
.icon{
    display: inline-block;
    position: relative;
    height:30px;
    width: 40px;
}
.icon-del {
    background: url(location.png) no-repeat;
   height:100%;
   width:100%;
   display: inline-block;
}

这么写能让蓝色图标正常显示,那么如何将这个图标变为黑色呢?

首先我们为这个图标设置投影

  .icon >.icon-del {
    filter: drop-shadow(20px 0 #000); 
   }

设置投影,x偏移20px

再设置偏移量,和投影偏移相等,同时为父元素设置overflow:hidden;

.icon{
    overflow:hidden;  //新增
    display: inline-block;
    position: relative;
    height:30px;
    width: 40px;
}
 .icon >.icon-del {
    filter: drop-shadow(20px 0 #000); 
   position: relative;
   left: -20px;
   }

最终效果,原图标隐藏,只显示投影,看上去就好像是改变了图标的颜色啦!


image.png

文章参考:
png小图标CSS赋色demo
张鑫旭CSS3 filter:drop-shadow滤镜与box-shadow区别应用

咦,我是不是让你们少了勾搭UI小姐姐的机会?

溜了溜了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容