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小姐姐的机会？

溜了溜了