之前一直以为用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. Video for Linux Two API Specification

    V4L2 的使用规范,网址为:https://www.linuxtv.org/downloads/legacy/video4linux/API/V4L2_API/spec-single/v4l2.ht ...

  2. Docker在Linux上运行NetCore系列（二）把本地编译好的镜像发布到线上阿里云仓库

    转发请注明此文章作者与路径,请尊重原著,违者必究. 系列文章:https://www.cnblogs.com/alunchen/p/10121379.html 开始 本篇文章结束在本地创建完成镜像后, ...

  3. C# 7.1中default关键字的新用法

    default 关键字有两类用法 switch语句中指定默认标签 默认值表达式 switch 语句 int caseSwitch = 1; switch (caseSwitch) { case 1: ...

  4. .net敏捷开发框架 力软敏捷开发(learun) 让开发变的更简单

    版本:6.1.6.2 体验地址:www.fishcmonkey.com 联系QQ:6539471

  5. IDEA解决crtl+space与搜狗输入法冲突

    注册表修改 两个地方修改成上图的数据,重启电脑 HKEY_CURRENT_USER/Control Panel/Input Method/Hot Keys,保存的是当前用户的快捷键配置: HKEY_U ...

  6. (9)Microsoft office Word 2013版本操作入门_文本框_word排版

    1.插入文本框 :[插入]---[文本框]可以自己画,也可以选择已有的模板 2.文本框设置 :点中文本框选择[格式]---[对齐文本]可以让文字上下居中,[形状填充]填充不同的颜色.[形状轮廓]可以改 ...

  7. Java高并发--AQS

    Java高并发--AQS 主要是学习慕课网实战视频<Java并发编程入门与高并发面试>的笔记 AQS是AbstractQueuedSynchronizer的简称,直译过来是抽象队列同步器. ...

  8. Maven（八）Eclipse创建Web项目（复杂方式）

    1. 生成标准的Web工程结构 2. 勾选结尾为webapp的包 3. 生成的文件结构如下 3.1 生成的目录结构若存在错误,缺少servlet.api 3.1.1 添加步骤如下 4.生成后存在的缺点 ...

  9. JS基础(二)事件监听练习之table鼠标悬停行变色

    JS监听事件简单学习: [object].addEvent("事件类型","处理函数","冒泡事件或捕获事件");   [object].r ...

  10. EJS-初识

    项目中使用了EJS,因此,也开始接触了EJS. EJS官方定义:it's just plain JavaScript. 总的来说,上手较快(毕竟我是个菜鸟). 第一步:安装: 第二部使用: 在html ...