通过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 相关文章推荐
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
css背景和边框标签实例详解
May 21 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数据库备份还原类分享
2014/03/20 PHP
php检测useragent版本示例
2014/03/24 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
列表内容的选择
2006/06/30 Javascript
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
深入解析Python中的WSGI接口
2015/05/11 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
python executemany的使用及注意事项
2017/03/13 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
深入浅析python with语句简介
2018/04/11 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
财务出纳岗位职责
2015/03/31 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书