<!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. An Easy Introduction to CUDA C and C++

    An Easy Introduction to CUDA C and C++ This post is the first in a series on CUDA C and C++, which i ...

  2. Python+Unittest+Requests+PyMysql+HTMLReport 多线程并发接口化框架

    整体框架使用的是:Python+Unittest+Requests+PyMysql+HTMLReport 多线程并发模式 主要依赖模块 Unittest.Requests.PyMysql.HTMLRe ...

  3. UNP学习第六章select

    一.I/O复用典型的网络应用场合 当客户处理多个描述字时,必须使用I/O复用,这在前一段中已做了描述. 一个客户同时处理多个套接口时可能的,但很少出现. 如果一个TCP服务器既要处理监听套接口,又要处 ...

  4. POJ 2299 Ultra-QuickSort (树状数组+离散化 求逆序数)

    In this problem, you have to analyze a particular sorting algorithm. The algorithm processes a seque ...

  5. jquery实现简单的搜索功能

    管理系统中需要实现导航列表的搜索功能,写了一个简单的小栗子: <!DOCTYPE html> <html lang="en"> <head> & ...

  6. Delphi正则表达式使用方法（TPerlRegEx）

    目前主流的delphi下的正则表达式,应该是 PerlRegEx . 官方网站: http://www.regular-expressions.info/delphi.html    直接下载: ht ...

  7. 对于页面上下载pdf或者excel按钮的实现

    这个主要是通过      window.open(url + params) url后台给存放的路径,params是参数

  8. 将日志(Microsoft.Extensions.Logging)添加到.NET Core控制台应用程序

    在.NET Core项目中,日志记录是通过依赖项注入进行管理的. 尽管这对于ASP.NET项目效果很好,但在启动Startup.cs中的新项目时,所有这些都会自动创建,而在控制台应用程序中则需要一些配 ...

  9. Windows操作系统架构

    用户态 用户态有四类组件,这四类组件都是以进程形式存在的,也就是说,它们都有自己的进程地址空间(其实就是一套页表). 1. System Support Processes 这些是固化的进程,也就是说 ...

  10. SCI小论文投稿记录

    英文小论文投的是SCI 3区的一个刊物,收录在spring,ei等, 投稿的时候2019/2/3影响因子2.8左右 现在2019/8/13  影响因子3.844 先科普下论文的各个状态 1. Subm ...