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濾鏡