通过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

发表评论