通过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动画效果抖动解决方法
Sep 03 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 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&amp;mysql(三)
2006/10/09 PHP
php时间不正确的解决方法
2008/04/09 PHP
flash用php连接数据库的代码
2011/04/21 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
完美的php分页类
2017/10/24 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
让焦点自动跳转
2006/07/01 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
python reduce 函数使用详解
2017/12/05 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
数据员岗位职责
2013/11/19 职场文书
车辆安全检查制度
2014/01/12 职场文书
《白鹅》教学反思
2014/04/13 职场文书
国旗下演讲稿
2014/05/08 职场文书
股指期货心得体会
2014/09/13 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
骨干教师考核评语
2014/12/31 职场文书
乌镇导游词
2015/02/02 职场文书
公司慰问信范文
2015/03/23 职场文书
商务司机岗位职责
2015/04/10 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android