<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .icon {

            display: inline-block;

            width: 20px;

            height: 20px;

            overflow: hidden;

        }

        .icon-del {

            background:url("卡包.png") no-repeat center;

            background-size: 20px 20px;

        }

        .icon>.icon {

            position: relative;

            left: -20px;

            border-right: 20px solid transparent;

            -webkit-filter: drop-shadow(20px 0 blue);

            filter: drop-shadow(20px 0 blue);

        }

    </style>

</head>

<body>

    <p><strong>原始图标</strong></p>

    <i class="icon icon-del"></i>

    <p><strong>可以变色的图标</strong></p>

    <i class="icon"><i class="icon icon-del"></i></i>

</body>

</html>

效果：

知识点传送门：http://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/

　　　　　　    http://www.zhangxinxu.com/study/201606/png-icon-color-fill.html

png图标任意赋色的更多相关文章

  1. Visual Studio 2015 改变窗体图标 & 任意位置打开窗体 & 禁止鼠标改动窗体大小

    1.改变窗体图标 先把图标放到项目文件夹中,然后点击窗体属性的ICON添加即可. 参考:https://www.cnblogs.com/yangxuli/p/8075484.html?tdsource ...

  2. PNG格式小图标的CSS任意颜色赋色技术

    一.眼见为实 CSS可以修改图片的颜色,没错,可以,眼见为实!您可以狠狠地点击这里:png小图标CSS赋色demo 上面的不是很黑的是原始图标,是个PNG图片,下面这个是可以赋色的: 下面,我们随意选 ...

  3. 详解使用icomoon生成字体图标的方法并应用

    原文:http://blog.csdn.net/u013938465/article/details/50680468 最近项目大量用到字体图标,大家也知道,字体图标任意缩放不会失真,也大大减少请求数 ...

  4. 字体图标库 IcoMoon IconFont Font Awesome的使用

    在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图标,字体图标任意放大缩小不会失 ...

  5. icomoon：生成字体图标的方法并应用

    字体图标任意缩放不会失真,也大大减少请求数量,非常好用. 在线生成工具:https://icomoon.io/app/#/select 在线SVG图库(阿里),  用于导入:http://www.ic ...

  6. java中经常使用的Swing组件总结

    1.按钮(Jbutton) Swing中的按钮是Jbutton,它是javax.swing.AbstracButton类的子类,swing中的按钮可以显示图像,并且可以将按钮设置为窗口的默认图标,而且 ...

  7. IDEA简单部署MVC项目

    本文章主要参考七小栈主的文章,特此说明: 前提 在配置好JDK,配置好Maven,配置链接如下:如何配置Java环境,包括JDK,Maven等 建项目 IEDA中File->New->Pr ...

  8. Workflow 规则大全 最新版

    ​对于怎么操作Workflow我就不重复说明了 大家可以搜索我的另一条微博.Workflow,作为一款提高效率的软件,我觉得很有必要进行推广,当然我比较需要这里面的很多规则,先为己再为公.首先我只是出 ...

  9. Scratch 少儿编程之旅（四）— Scratch入门动画《小猫捉蝴蝶》（中）

    本期内容概括: 了解Scratch的更多操作,用[无限循环]来更改“小猫”角色的代码: 添加[碰到边缘就反弹]积木块指令: 更改角色的旋转模式和造型,让”小猫”走路更生动: 两种[循环]语句的区别: ...

随机推荐

  1. 过滤器为JSP文件生成静态页面

    用过滤器为JSP文件生成静态页面,这只是一个简单的实例,客户端浏览器第一次请求JSP页面时,服务器将生成对应的HTML文件,以后访问同一JSP文件,将转为访问生成的HTML文件.一.过滤器 packa ...

  2. Qt pro使用sql之类的需要添加的模块

    举个栗子,当要使用QSqlQuery 的时候需要在pro中添加Qt +=sql 然后在.h里面#include<QSqlQuery>即可使用sql. 同理要使用media或者net的时候只 ...

  3. Linux进程基本原理

    主题进程介绍 一进程相关概念 内核的功用:进程管理.文件系统.网络功能.内存管理.驱动程序.安全功能等 在操作系统上会运行多个应用程序,应用程序分配多大的内存都由内核实现 程序文件 程序和进程的关系 ...

  4. 科学把妹法 (￣▽￣)"

    曾经有一位生物学人士,公布了工科把妹第一弹,暨“巴甫洛夫把妹法”: 每天给你那位心仪的女同事/女同学的抽屉里都放上精心准备的早餐,并且保持缄默不语,无论她如何询问,都不要说话.  如此坚持一至两个月, ...

  5. Python基础教程（006）--Python的特点

    前言 了解Python背景,明白Python在目前社会中的标准库是有成千上万的Python爱好者共同维护的. 知识点 Python是完全面相对象的语言 函数,模块,数字,字符串都是对象,在Python ...

  6. thinkphp生成二维码

    /** * 生成二维码 * @param string $url url连接 * @param integer $size 尺寸 纯数字 */ function qrcode($url,$size=4 ...

  7. linux查看java jdk jre安装路径和设置环境变量

    一. 查看java jdk安装路径和设置环境变量 windows: set java_home:查看JDK安装路径 java -version:查看JDK版本 linux: whereis java ...

  8. NOIWC2019 懵逼记

    弱省蒟蒻,第一次也是最后一次来冬令营.. Day [-inf,-1] \(woc\)咋啥都听不懂,没错在下划水王. Day 0 白天上课继续划水..晚上跑去试机,骗了半天交互的分就滚了..半夜里竟然睡 ...

  9. 回调函数 和 promise对象，及封装API接口

    1.回调函数:https://blog.csdn.net/baidu_32262373/article/details/54969696 注意:回调函数不一定需要用到 return.如果浏览器支持Pr ...

  10. Python面向对象 杂篇（后记）

    异常处理 什么是异常:         我们在调试程序时,常常会因为各种报错信息导致程序无法运行,异常也是一个对象,用来表示错误.我们可以捕捉异常,并做相应处理,从而增加代码的友好程度. 异常处理: ...