CSS图片赋色技术研究

简介

代码放在 github上 css变色方案研究

文章开始以前，先给出几个研究 css 代码实现图片赋色技术的技术文章。

1. PNG 格式小图标的 CSS 任意颜色赋色技术 - 张鑫旭
2. 两行 CSS 代码实现图片任意颜色赋色技术 - ChokCoco
3. 利用 CSS 改变图片颜色的多种方法 - 前端指南
4. SVG 滤镜原来还能够这么用

工做中，常常会有这样的场景：

UI 给我切了一张 PNG（jpeg gif ...） ​

​

要根据状态变成蓝色​

​

这个时候，你可能会想，那还不简单，因而洋洋洒洒列出几个解决方案

• 使用 unicode 编码 + @font-face
• 使用纯色 svg
• 叫 UI 切两张图（绝大部分是这样作的）

那么是否还有别的，能够利用 css 来对图片进行赋色的技巧呢

background-blend-mode 混合模式变色方案

技术前提：就是黑色纯色，背景白色：

​

​

技术原理：利用 background-blend-mode ，咱们能够在图片下叠加多一层其余颜色，经过 background-blend-mode: lighten 这个混合模式实现改变图片主体颜色黑色为其它颜色的目的。

纯色

.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;
}复制代码

效果以下

​

​

渐变色

如同上面的例子，实现主色改成渐变色

.pic {
  background-image: url($img), linear-gradient(#f00, #00f);
  background-blend-mode: lighten;
  background-size: cover;
}复制代码

效果以下：

​

​

讲解

这里就有必要解释一下 lighten 这个混合模式了。变亮，变亮模式与变暗模式产生的效果相反：

1. 用黑色合成图像时无做用，用白色时则仍为白色
2. 黑色比任何颜色都要暗，因此黑色会被任何色替换掉。反之，若是素材的底色是黑色，主色是白色。那就应该用变暗（darken）的混合模式

综上，咱们确实只须要两行代码就能够实现白色底色黑色主色图片的任意颜色赋色技术。

{
  background-image: url($img), linear-gradient(#f00, #00f);
  background-blend-mode: lighten;
}复制代码

其中，background-image 的第二值就是你但愿赋值给的渐变色（固然，渐变色能够生成纯色）。

• filter 滤镜
• mask-image
• mask-clip

filter:drop-shadow 利用投影实现赋色

先来看一下 filter:drop-shadow 属性的用法

drop-shadow(offset-x offset-y blur-radius spread-radius color)复制代码

offset-x：水平方向偏移量 ，正值表示图像的阴影在图像的 右方。

offset-y: 垂直方向偏移量，正值表明图像的阴影在图像的 下方

blur-radius（可选）: 阴影的模糊半径。值越大阴影变得越大和越模糊。若是未指定，则默认为 0，致使锐利，不模糊的边缘。不容许使用负值

color（可选的）:阴影的颜色。若是未指定，color 则使用该属性的值。

咱们拿文章开头的图片作一个例子

​

​

.pic {
  filter: drop-shadow(100px 0 0 blue);
}复制代码

看到这个投影，想必你们都有思路了，若是想实现图片变色的话，须要一个相对定位而且 overflow:hidden的父级

.container {
  width: 40px;
  height: 40px;
  position: relative;
  overflow: hidden;
}

.container .pic2 {
  background: url(./user_black.png) no-repeat center;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0px;
  top: 0px;
  border-left: 40px transparent solid;
  filter: drop-shadow(-40px 0 0 #1296db);
}复制代码

<div class="container">
  <img src="./user_black.png" alt="" class="pic2" />
</div>复制代码

效果以下

​

​

那这个 border-left: 40px transparent solid;是什么东西呢

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

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

因此 border-left: 40px transparent solid;是不可少的

利用svg滤镜进行变色

这个技术要结合filter: url(resources.svg#c1)这个属性来使用。

URL 函数接受一个 XML 文件，该文件设置了 一个 SVG 滤镜，且能够包含一个锚点来指定一个具体的滤镜元素.

几个参考连接：

1. SVG 滤镜创造液态滚动沾粘（Gooey）效果
2. SVG 滤镜原来还能够这么用
3. SVG 研究之路 (11) - filter:feColorMatrix

咱们能够利用 SVG 颜色矩阵滤镜（feColorMatrix）对图片进行赋色操做

颜色矩阵滤镜，是用一个矩阵的计算，将图片的色彩的每一个通道(基于 RGBA)从新计算后输出，即可以达到各类不一样的色彩变化效果。

咱们知道每个颜色都是有 R（红）、G（绿）、B（蓝）、A（透明／Alpha）四个颜色通道组成，每个通道颜色具备 0 到 255 色阶，经过色彩矩阵的换算，能够改变图片里每个像素的颜色，公式以下：

​

​

看不懂？ 没问题

​

​

里头的 R in 表明原来的红色色版，R out 表明转换过的红色色版，依此类推 G 和 B 也是如此，最后一个 1 是能够额外增长的参数就先别理他了，所以由公式咱们能够知道，通过这个色彩矩阵的转换，咱们能够轻松地把一张图片里头的某些颜色换成另外的颜色，或是把某些颜色直接拿掉，直接看下面的范例图比较容易理解：

​

​

隐藏红色区域

.pic {
  filter:url(#svgFilter);
}复制代码

<svg>
  <filter id="svgFilter">
     <feColorMatrix values="0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> 
  </filter>
</svg>

<img src="url" class="pic" />复制代码

效果以下

​

​

下面，咱们把一个黑色纯色的图标变成 红色

如同下面效果:

​

​ ​

​

更多的效果建议使用工具导出xml 格式的svg滤镜