通过css3的filter滤镜改变png图片的颜色的示例代码


Posted in HTML / CSS onMay 06, 2020

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

通过css3的filter滤镜改变png图片的颜色的示例代码

接下来是代码

<p><strong>原始图标</strong></p>
<i class="icon icon-del"></i>
<p><strong>可以变色的图标</strong></p>
<i class="icon"><i class="icon icon-del"></i></i>

 

.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浏览器上是无法正常显示的,我们通过加透明的边框来解决这一点。

总结

到此这篇关于通过css3的filter滤镜改变png图片的颜色的文章就介绍到这了,更多相关CSS改变png图片颜色内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
Html5调用企业微信的实现
Apr 16 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 #HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 #HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 #HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 #HTML / CSS
CSS实现聊天气泡效果
Apr 26 #HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 #HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 #HTML / CSS
You might like
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
js有关元素内容操作小结
2011/12/20 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
JS常见算法详解
2017/02/28 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
python实现kmp算法的实例代码
2019/04/03 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
Python 实现一个计时器
2020/07/28 Python
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
仓库管理专业个人自我评价范文
2013/11/11 职场文书
行政主管岗位职责
2013/11/18 职场文书
《中华少年》教学反思
2014/02/15 职场文书
租赁协议书范本
2014/04/22 职场文书
社区服务标语
2014/07/01 职场文书
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
通知范文怎么写
2015/04/16 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js