通过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实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
php实现三级级联下拉框
2016/04/17 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
python去除所有html标签的方法
2015/05/05 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
python实现计算器简易版
2020/12/17 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
抽奖活动主持词
2014/03/31 职场文书
项目经理任命书
2014/06/04 职场文书
在职员工证明书
2014/09/19 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
小石潭记导游词
2015/02/03 职场文书
市场部岗位职责
2015/02/12 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
JavaScript实现两个数组的交集
2022/03/25 Javascript
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang