<!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. ubuntu下oracle 数据库安装

    环境:腾讯云 一. 由于腾讯云直接下载oracle太慢,先安装docker 1.sudo apt update 2.接下来,使用apt安装一些允许通过HTTPS才能使用的软件包: sudo apt i ...

  2. Spring MVC processing flow

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11484057.html DispatcherServlet receives the request. ...

  3. Hashtable、HashMap、TreeMap、ConcurrentHashMap、ConcurrentSkipListMap区别

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11444013.html 并发场景下的Map容器使用场景 如果对数据有强一致要求,则需使用Hashtab ...

  4. PHP curl_multi_strerror函数

    curl_multi_setopt — 返回描述错误码的字符串文本. 说明 string curl_multi_strerror ( int $errornum ) 返回描述 CURLM 错误码的字符 ...

  5. 【LeetCode 32】最长有效括号

    题目链接 [题解] 设dp[i]表示以第i个字符结尾的最长有效括号的长度. 显然只要考虑s[i]==')'的情况 则如果s[i-1]=='(',则dp[i] = dp[i-2]+2; 如果s[i-1] ...

  6. BZOJ 4619: [Wf2016]Swap Space(贪心)

    传送门 解题思路 首先肯定是先处理\(b>a\)的,这样可以获得更多空间.处理时要先处理\(a\)比较小的,再处理\(a\)比较大的,因为要求最小值,而\(b>a\)的总量是确定的,那么就 ...

  7. jenkins安装-配置

    jenkins安装-配置 注意: jenkins访问 用chrome浏览器 安装包下载:http://pkg.jenkins-ci.org/redhat/ (使用2.92版本的) 安装jdk: 1.8 ...

  8. Java IO Demo

    //FileReader FileWriter 读写英文    public void FileReaderAndWriter1() throws Exception { File filePath ...

  9. MySQL 5.7免安装版设置编码格式、设置root用户密码 远程登录.

    一.设置默认编码格式为utf-8 ... 由于免安装版并没有my.ini的配置文件.需要自行粘贴配置并创建一个my.ini 配置如下: [mysql] # 设置mysql客户端默认字符集 defaul ...

  10. tp5.0如何获取header的Authorization值

    tp5.0如何获取header的Authorization值$request->header();好像没有这个值的但是发送请求头部有的 解决方案: 在.htaccess 文件中加入 设置 Set ...