之前一直以为用background引入的图标无法染色（非字体图标），现在才知道有黑科技可以用，就是利用drop-shadow。

代码示例

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .face1{

          display: inline-block;

          width: 40px;

          height: 40px;

          background-image: url(face.svg);

        }

        .face2{

          display: inline-block;

          width: 40px;

          height: 40px;

          overflow: hidden;

        }

        .face2 i{

          display: inline-block;

          width: 40px;

          height: 40px;

          background-image: url(face.svg);

          transform: translateX(-100%);

          -webkit-filter:drop-shadow(40px 0 #F88E1D);

        }

        .face3{

          display: inline-block;

          width: 40px;

          height: 40px;

          overflow: hidden;

          background-image: url(face.svg);

        }

        .face3:after{

          content: '';

          display: inline-block;

          width: 40px;

          height: 40px;

          transform: translateX(-100%);

          -webkit-filter:drop-shadow(40px 0 #F88E1D);

          background: inherit;

        }

    </style>

</head>

<body>

    <h3>原始图标：</h3>

    <span class="face1"></span>

    <h3>染色图标(两层标签)：</h3>

    <span class="face2"><i></i></span>

    <h3>染色图标(after)：</h3>

    <span class="face3"></span>

</body>

</html>

效果

注意问题

1.使用after作为第二层标签的这种方式，可能会出现最后效果有些杂色。

这是因为after背景继承了父标签，然后以它为drop-shadow，这时就出现两个图标了。问题就出在父标签的背景图（第三个图标）被叠在下面，图标如果有比较细的线条，叠在下面的图标会像糊在下面。

所以最好不要用这种方式，老老实实写两层标签。

2.在低版本的chrome里，需染色图标如果是在有滚动条的区域内，会染色不了。

这时需要在滚动区域加属性：

position: relative;

z-index:1;

总结

如果有需要染色图标，做成字体图标好些。这种drop-shadow的方式，最后再选。

CSS染色图标（图片）的更多相关文章

  1. 多个图标图片（雪碧图）使用CSS样式显示

    现在的网页中显示很多图标算是常态,发现项目中页面上用到的图标都是单个图标单个文件,用的时候直接往页面上挂,这确实很常态. 如果,网站是挂在外网上,或者网速过低,又大量使用图标的情况下,由于浏览器和服务 ...

  2. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  3. Css - 字体图标

    Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...

  4. css字体图标的制作和使用。

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

  5. 007：CSS字体图标

    目录 理论 一:字体图标 图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的.更重要的是图片不能很好 ...

  6. css 小图标 & iconfont 字体图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont 字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  7. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  8. webpack模块加载css文件及图片地址

    webpack支持css文件加载并打包,只需安装相应加载器并在配置文件中配置 . 加载的css文件内容会与该模块里的js内容混合封装,这样做的好处是一个js文件包含了所有的css与js内容,有效减少了 ...

  9. CSS中对图片(background)的一些设置心得总结

    写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...

随机推荐

  1. centos7修改网卡名称为eth0-技术流ken

    前言 在配置集群的时候,需要保持网卡名称一致,所以我们需要修改centos7中的网卡名称为eth0. 检查网卡 检查网卡,现在网卡名称是ens33 [root@localhost ~]# ip a : ...

  2. iOS -数据持久化方式-以真实项目讲解

    前面已经讲解了SQLite,FMDB以及CoreData的基本操作和代码讲解(CoreData也在不断学习中,上篇博客也会不断更新中).本篇我们将讲述在实际开发中,所使用的iOS数据持久化的方式以及怎 ...

  3. Runtime详解（上）

    这篇关于Runtime讲解参考https://juejin.im/post/593f77085c497d006ba389f0以及https://www.jianshu.com/p/6ebda3cd80 ...

  4. linux下定时执行任务的方法

    linux下定时执行任务的方法 在LINUX中你应该先输入crontab -e,然后就会有个vi编辑界面,再输入0 3 * * 1 /clearigame2内容到里面 :wq 保存退出. 在LINUX ...

  5. 23.QT记事本

    描述 主要功能有: 新建,打开,保存,另存为,打印, 编辑,撤销,,拖放,xml配置文件读写,字体更改,查找替换 菜单栏,工具栏,状态栏的实现 如下图所示: 效果如下所示:   源码下载地址: htt ...

  6. LNMP环境下安装Redis，以及php的redis扩展

    1.下载 sudo wget http://download.redis.io/releases/redis-4.0.9.tar.gz 2.解压 sudo tar zvxf redis-4.0.9.t ...

  7. js 年份左右点击加减

    默认为今年 var date = new Date; $scope.year = date.getFullYear(); //年份减 $scope.yearPrev = function(){ $sc ...

  8. C# 简单实现直线方程，抛物线方程

    本例子是简单的在WinForm程序中实现在坐标系中绘制直线方程,抛物线方程,点.重新学习解析几何方面的知识.仅供学习分享使用,如有不足之处,还请指正. 涉及知识点: 直线方程的表达方式:一般表达式Ax ...

  9. Android为TV端助力 Canvas 和 Paint用法

    自定义view里面的onDraw方法,在这里我们可以绘制各种图形,onDraw里面有两个API我们需要了解清楚他们的用法:Canvas 和 Paint. Canvas翻译成中文就是画布的意思,Canv ...

  10. ImportError: No module named simplejson.scanner

    一.出现ImportError: No module named simplejson.scanner,是没有安装simplejson,安装一下就好了. 安装指令:python setup.py in ...