之前一直以为用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. 【译】微型ORM：PetaPoco

    PetaPoco是一款适用于.Net 和Mono的微小.快速.单文件的微型ORM. PetaPoco有以下特色: 微小,没有依赖项……单个的C#文件可以方便的添加到任何项目中. 工作于严格的没有装饰的 ...

  2. Oracle时间与系统不同步，TimeStampService

    要用到TimeStampService, Oracle数据库中select sysdate from dual获取数据库时间,发现比本地电脑慢几十秒, 不知这个实际中有没有影响 通过select db ...

  3. 人工智能第三课：数据科学中的Python

    我用了两天左右的时间完成了这一门课<Introduction to Python for Data Science>的学习,之前对Python有一些基础,所以在语言层面还是比较顺利的,这门 ...

  4. Win10一周年纪念版，瞧一瞧Linux子系统

    Bash Bash是一个命令处理器,通常运行于文本窗口中,并能执行用户直接输入的命令.Bash还能从文件中读取命令,这样的文件称为脚本.和其他Unix shell 一样,它支持文件名替换(通配符匹配) ...

  5. 分页Sql语句

    第一种 Top剔除法.去除Top (pageIndex-1)*PageSize * FROM dbo.SBD_EXCHANGE_BILL ) EB_ID FROM dbo.SBD_EXCHANGE_B ...

  6. 在SQL中查询某列具有相同值的数据

    SELECT * FROM dbo.SBD_WAYBILL_GOODS WHERE WG_SW_ID ) ORDER BY WG_ID SELECT * FROM dbo.SBD_WAYBILL WH ...

  7. Opencv利用ROI将一张图片叠加到另一幅图像的指定位置

    机器配置为:VS2013+opencv2.4.13+Win-64bit.===========================分割线========================本节将利用ROI将一 ...

  8. 【Java每日一题】20170208

    20170207问题解析请点击今日问题下方的“[Java每日一题]20170208”查看(问题解析在公众号首发,公众号ID:weknow619) package Feb2017; public cla ...

  9. 3.类和接口_EJ

    第13条: 使类和成员的可访问性最小化 良好的模块设计能隐藏其内部数据和其他实现细节,模块之间只通过它们的API进行通信.java语言提供了许多机制来协助隐藏信息.访问控制机制决定了类.接口和成员的可 ...

  10. jquery 树形导航菜单无限级

    转自:http://www.jb51.net/article/71615.htm 侵删<!DOCTYPE html> <html lang="en"> &l ...