<!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. 如何限制只有某些IP才能使用Tomcat Manager

    只有指定的主机或IP地址才可以访问部署在Tomcat下的应用.Tomcat提供了两个参数供你配置:RemoteHostValve 和RemoteAddrValve,前者用于限制主机名,后者用于限制IP ...

  2. sublime-1

    1.提示找不到margo go get github.com/DisposaBoy/MarGo(该工具已经被作者清空了,大部分人在这一步就被卡住了) 如果你也是在第二步卡住了,那么可以按照我的方法进行 ...

  3. anaconda3创建py2环境

    查看conda的py环境conda info -e # 创建一个名为python34的环境,指定Python版本是3.4(创建py27操作一样)conda create -n py34 python= ...

  4. 利用PHP和百度ai实现文本以及图片的审核

    步骤: 首先打开百度ai 开发平台 注册一个账号: 注册账号,进入控制台 创建自己的应用,获取apikey 和秘钥 进入文档页 文本审核: 图像审核: 代码实例: class Sentive { pr ...

  5. oracle聚合函数avg()注意点

    avg:用avg函数进行平均运算时会忽略空值(即最终出现的平均值不对[如果原始数据中存在空值的话]),可以这样子来解决:avg(nvl(comm,0))或者sum(comm)/count(*)---- ...

  6. 如何让EditText不能自动获取焦点（转）

    转载地址:http://blog.csdn.net/subaohao/article/details/9043895 在activity中放置了1个或1个以上的EditText,进入该activity ...

  7. Android 架构师技能图谱

    # Android 架构师技能图谱 ## 架构与设计 - 设计模式 - 重构 - 技术选型 - 特性 - 可用性 - 性能 - 包大小 - 方法数 - 文档 - 技术支持 - UI架构模式 - MVC ...

  8. 100、TensorFlow实现FFM Field-awared FM模型

    ''' Created on 2017年11月15日 @author: weizhen ''' import tensorflow as tf import pandas as pd import n ...

  9. 85、使用TFLearn实现iris数据集的分类

    ''' Created on 2017年5月21日 @author: weizhen ''' #Tensorflow的另外一个高层封装TFLearn(集成在tf.contrib.learn里)对训练T ...

  10. PHP面试 AJAX基础内容

    AJAX基础内容 Ajax的基本工作原理 Ajax基础概念:通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新 Ajax工作原理:XMLHttpRequest是Ajax的基础     ...