css3中的滤镜filter怎样实现修改图片颜色？

发布时间：2023-08-04 13:55:39 所属栏目：语言来源：

导读：今天我们一起来了解css3中的滤镜filter的使用，滤镜filter还是比较实用的，利用filter滤镜能够实现更改图片颜色的效果，那么具体是怎样实现呢？方法是什么？下面我们一起了解看看。

本方法是通过CSS3滤镜 fi

今天我们一起来了解css3中的滤镜filter的使用，滤镜filter还是比较实用的，利用filter滤镜能够实现更改图片颜色的效果，那么具体是怎样实现呢？方法是什么？下面我们一起了解看看。

 本方法是通过CSS3滤镜 filter 中的 drop-shadow 将png图片的非透明部分生成任意颜色的投影，然后将原始图片隐藏起来，从而达到改变图片颜色的目的

接下来是代码

原始图标



可以变色的图标



.icon {

 display: inline-block;

 width: 20px; height: 20px;

 overflow: hidden;

}

.icon-del {

 background: url(delete.png) no-repeat center;

}

.icon > .icon {

 position: relative;

 left: -20px;

 border-right: 20px solid transparent;

 -webkit-filter: drop-shadow(#0033FF 20px 0);

 filter: drop-shadow(#0033FF 20px 0);

}

注意其中很关键的一处

border-right: 20px solid transparent;

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

由于我们使用使用 overflow:hidden 隐藏掉了原始图标，所以导致其投影在Chrome浏览器上是无法正常显示的，我们通过加透明的边框来解决这一点。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!