<!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. 0xC0000005: 写入位置 0x00000000 时发生访问冲突的解决办法(转)

    上面的意识就是你吧值付给了不该赋给的变量,或者说你把值付给了不能付给的变量(或者常量) ()最简单也最直接的错误可能就是scanf()的问题,我们都知道输入的时候都是scanf("%格式&q ...

  2. shell脚本相关关系、浮点、循环

    将一堆命令放在脚本里变成可执行脚本执行: 脚本编写,文件名为.sh,获取hostname的主机名 系统变量: Env:查看系统变量 Set :打印所有变量可以和grep和用 Export path:定 ...

  3. Python--字符编码、文字处理、函数

    了解字符编码的知识储备 我们日常用到的文本编辑器有nodepad++,pycharm,word等等,用他们存取文件的过程大致类似,需要知道打开编辑器就打开了启动了一个进程,是在内存中的,所以在编辑器编 ...

  4. 阿里云 Centos 7 PHP7环境配置 LNMP

    首先更新系统软件 $ yum update 安装nginx 1.安装nginx源 $ yum localinstall http://nginx.org/packages/centos/7/noarc ...

  5. 【Flutter学习】组件学习之目录

    01. Flutter组件-Layout-Container-容器  02. Flutter组件-Text-Text-文本  03. Flutter组件-Text-RichText-富文本  04. ...

  6. CCPC-Wannafly 秦皇岛 day5训练总结

    训练总结 今天开局先上去看到了J,粗略(>_<)的看了下题意,然后就觉得应该是个dp 就开始写,思路是个三维dp,开的10000*10*10  觉得就不会爆,时间上也没问题,后面陆续wa了 ...

  7. PHP基础知识总结（二） 数据类型、数组、变量和运算符

    一.PHP是服务器端的脚本语言.在服务器端解析完成后,向前端浏览器发送html. PHP文件的部署位置在:xampp\htdocs文件夹下,当然这个位置可以修改.二.PHP基本语法 1.文件后缀名是p ...

  8. CentOS 安装MySQL5.7 源码方式安装

    MySQL rpm方式安装:https://www.cnblogs.com/deverz/p/9560403.html 1.卸载已经安装的MySQL yum list installed mysqlr ...

  9. 前端之间的url 传值

    转自:https://www.cnblogs.com/candy-Yao/p/8858166.html

  10. python调用tushare获取沪深股通十大成交股

    接口:hsgt_top10 描述:获取沪股通.深股通每日前十大成交详细数据 注:tushare库下载和初始化教程,请查阅我之前的文章 输入参数 名称      |      类型      |    ...