很久之前在张鑫旭大大的博客看到过一篇 PNG格式小图标的CSS任意颜色赋色技术，当时惊为天人，感慨还可以这样玩，私底下也曾多次想过有没有其他方法可以实现。
本方法与上面 ZXX 的方法及流传的使用 filter 滤镜 drop-shadow 不同。发现这个方法是在研究 background-blend-mode 混合模式的各种效果的过程中。下面直接进入正文。
mix-blend-mode 与 background-blend-mode
mix-blend-mode 在我之前的一篇文章初略介绍过 -- 不可思议的混合模式 mix-blend-mode，与本文的主角 background-blend-mode 一样，都是实现混合模式的。
混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。
简单区分一下这两个属性：
mix-blend-mode 用于多个不同标签间的混合模式
background-blend-mode 用于单个标签间内背景图与渐变背景间的混合模式。
background-blend-mode 的可用取值与 mix-blend-mode一样，不重复介绍，下面直接进入应用阶段。
使用 background-blend-mode: lighten 实现 PNG 任意颜色赋色技术
OK，下面进入正文。如何通过纯 CSS 技术实现 PNG 任意颜色赋色技术呢？
假设我们有这样一张 PNG 图片（黑色纯色，背景透明）：
利用 background-blend-mode ，我们可以在 PNG 图片下叠加多一层其他颜色，通过 background-blend-mode: lighten 这个混合模式实现改变 PNG 主体颜色的目的。
简单的 CSS 代码示意如下：
.pic { width: 200px; height: 200px; background-image: url($img); background-size: cover; } .pic1 { background-image: url($img), linear-gradient(#f00, #f00); background-blend-mode: lighten; background-size: cover; }