景

实际项目中，一般都会遇到不同颜色的图标，例如

导航栏图标的不同状态

方法

方法1

需要UI设计师给出不同颜色的图标，在不同状态下设置不同的元素背景。

.icon {
 background-image: url(./home.png);
}
.icon.active {
 background-image: url(./home-active.png);
}

缺点是：当状态改变后，浏览器才去拉取active状态的图片，所以视觉上会有闪动，体验不好

方法2

将两张图标合成雪碧图

.icon {
 background-image: url(./sprite.png);
 background-position: 0 0;
}
.icon.active {
 background-image: url(./home-active.png);
 background-position: -20px -20px;
}

优点：解决第一个方法闪动的问题

缺点：1. 合成雪碧图需要工作量；2.多了个图标，增加雪碧图的体积

方法3

CSS3投影---filter:drop-shadow(color, X-offset, Y-offset)

color：投影的颜色

X-offset： X轴偏移量

Y-offset：Y轴偏移量

drop-shadow：就好像光线照在元素上一样，元素里不透明的地方，光线无法穿透形成投影

<span class="icon-del"></span>
.icon-del {
 background: url(../images/delete.png) no-repeat center;
 width: 20px;
 height: 20px;
 display: inline-block;
 -webkit-filter: drop-shadow(red 20px 0);
 filter: drop-shadow(red 20px 0);
}

我们可以看到在原图标的右侧，出现红色的投影。现在需要做的是把原来图标隐藏起来

<span class="icon-wrapper">
 <span class="icon-del"></span>
</span>
.icon-wrapper {
 display: inline-block;
 width: 20px;
 height: 20px;
 overflow: hidden;
 position: relative;
}
.icon-del {
 background: url(../images/delete.png) no-repeat center;
 width: 100%;
 height: 100%;
 position: absolute;
 left: -20px;
 display: inline-block;
 border-right: 20px solid transparent;
 -webkit-filter: drop-shadow(red 20px 0);
 filter: drop-shadow(red 20px 0);
}

注意：图标的增加了个和本身宽度一致的右侧透明边框，让阴影投射在边框上。如果没有右侧边框，则元素完全处于不可见状态，drop-shadow不能生效（设想下，看不见的东西，自然没有投影）

优点：不需要额外的图标

缺点：需要两层DOM结构

方法4

background-blend-mode: 背景混合模式

简单来说，元素可以设置多个背景，这些背景按某种模式混合

<span class="icon-gear"></span>
.icon-gear {
 background-image: url(../images/gear.png);
 background-color: red;
 background-size: cover;
 width: 64px;
 height: 64px;
 display: inline-block;
 background-blend-mode: lighten;
}

图标（注意要求是黑色的图标）设置图片背景和颜色背景，然后按照lighten模式混合

lighten模式可以简单理解为：当背景叠加时，显示亮色。本例子中，黑色的图标和其他颜色的背景色叠加，自然显示背景色

优点：写法简洁

缺点：兼容性不好

希望本文能帮助到您！

点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）

关注 ｛我｝，享受文章首发体验！

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”

原文链接：http://eux.baidu.com/blog/fe/%E6%8E%A7%E5%88%B6%E5%9B%BE%E6%A0%87%E9%A2%9C%E8%89%B2

作者：林枫

TML 颜色由红色、绿色、蓝色混合而成。

颜色值

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

这个表格给出了由三种颜色混合而成的具体效果：

颜色值

1600万种不同颜色

三种颜色 红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。

在下面的颜色表中你会看到不同的结果，从0到255的红色，同时设置绿色和蓝色的值为0,随着红色的值变化，不同的值都显示了不同的颜色。

灰暗色调

以下展示了灰色到黑色的渐变

Web安全色?

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。

最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

、眼见为实

CSS可以修改图片的颜色，没错，可以，眼见为实！您可以狠狠地点击这里：png小图标CSS赋色demo

上面的不是很黑的是原始图标，是个PNG图片，下面这个是可以赋色的：

下面，我们随意选择一个颜色，例如紫色，然后：

是不是感觉很厉害！以后设计师就不需要在提供几套颜色的图片了。

SVG, icon fonts等技术似乎也不是那么耀眼了。

二、原理其实很简单

原理其实很简单，使用了CSS3滤镜filter中的drop-shadow，drop-shadow滤镜可以给元素或图片非透明区域添加投影。

如果对drop-shadow不是很了解，建议先看看前些时间写的“CSS3 filter:drop-shadow滤镜与box-shadow区别应用”一文！

对于背景透明的png小图标而言，如果我们施加一个不带模糊的投影，不就等同于生成了另外一个颜色的小图标了吗？

然后，我们把原始图标隐藏在容器外面，投影图标在容器中间，不见给人感觉是赋色效果了？

比方说本文的demo，如果把icon父级的的overflow:hidden去掉，原始的图标就暴露出来啦！

三、实现的时候实际有难度

原理如上面，我一开始实现的时候，以为很简单，因为分分钟可以实现自己的想法，后来发现有些天真了，Chrome浏览器怎么都显示不出来；FireFox浏览器却可以！咦，究竟发生了什么。

在Chrome浏览器下，drop-shadow有一个如下的呈现特性：

在Chrome浏览器下，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其drop-shadow是不可见的；实体部分哪怕有1像素可见，则drop-shadow完全可见。

所以，我试过：

• text-indent负值隐藏原始图，无投影，失败！
• clip剪裁隐藏，无投影，失败！
• margin负值隐藏原始图，无投影，失败！
• left负值隐藏原始图，无投影，失败！

通通不行，实现遇到了巨大的阻碍。

后来，灵光一现，如果我实体部分也在可视区域内，但是是透明的，会怎样呢（反正不会有投影出来）？

于是，我就试了下曾经立下无数战功的透明边框，卧槽，又立功了，成了！

因此，下面这一个CSS声明是千万不能少的：

border-right: 20px solid transparent;

四、关于兼容性

IE13+支持，Chrome和FireFox浏览器支持，移动端iOS支持，Android4.4+支持。也就是，基本上，移动端现在可以使用这种技术了。

既节约了流量，也让我们的开发更简单，维护更方便了。

原文：https://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/