談談一些有趣的CSS題目（十七）-- 難以想象的顏色混合模式 mix-blend-mode

原文: 談談一些有趣的CSS題目（十七）-- 難以想象的顏色混合模式 mix-blend-mode

開本系列，談談一些有趣的 CSS 題目，題目類型天馬行空，想到什麼說什麼，不只爲了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。

解題不考慮兼容性，題目天馬行空，想到什麼說什麼，若是解題中有你感受到生僻的 CSS 屬性，趕忙去補習一下吧。

不斷更新，不斷更新，不斷更新，重要的事情說三遍。

談談一些有趣的CSS題目（一）-- 左邊豎條的實現方法

談談一些有趣的CSS題目（二）-- 從條紋邊框的實現談盒子模型

談談一些有趣的CSS題目（三）-- 層疊順序與堆棧上下文知多少

談談一些有趣的CSS題目（四）-- 從倒影提及，談談 CSS 繼承 inherit

談談一些有趣的CSS題目（五）-- 單行居中，兩行居左，超過兩行省略

談談一些有趣的CSS題目（六）-- 全兼容的多列均勻佈局問題

談談一些有趣的CSS題目（七）-- 消失的邊界線問題

談談一些有趣的CSS題目（八）-- 純CSS的導航欄Tab切換方案

談談一些有趣的CSS題目（九）-- 巧妙的實現 CSS 斜線

談談一些有趣的CSS題目（十）-- 結構性僞類選擇器

談談一些有趣的CSS題目（十一）-- reset.css知多少

談談一些有趣的CSS題目（十二）-- 深刻探討 CSS 特性檢測 @supports 與 Modernizr

談談一些有趣的CSS題目（十三）-- 巧妙地製做背景色漸變更畫！

談談一些有趣的CSS題目（十四）-- 純 CSS 方式實現 CSS 動畫的暫停與播放！

談談一些有趣的CSS題目（十五）-- 談談 CSS 關鍵字 initial、inherit 和 unset

談談一些有趣的CSS題目（十六）-- 奇妙的 background-clip: text

全部題目彙總在個人 Github 。

正文從這裏開始：

CSS3 新增了一個頗有意思的屬性 -- mix-blend-mode ，其中 mix 和 blend 的中文意譯均爲混合，那麼這個屬性的做用直譯過來就是混合混合模式，固然，咱們咱們一般稱之爲混合模式。

混合模式最多見於 photoshop 中，是 PS 中十分強大的功能之一。固然，瞎用亂用混合模式誰都會，利用混合模式將多個圖層混合獲得一個新的效果，只是要用到恰到好處，或者說在 CSS 中利用混合模式製做出一些效果則須要對混合模式很深的理解及不斷的嘗試。

我我的對混合模式的理解也十分淺顯，本文只是帶領你們走進 CSS 混合模式的世界，初淺的瞭解混合模式及嘗試使用它製做一些效果。

 

mix-blend-mode 概述

上文也說了，mix-blend-mode 描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合。咱們將 PS 中圖層的概念替換爲 HTML 中的元素。

看看可取的值有哪些：

{
  mix-blend-mode: normal;         // 正常
  mix-blend-mode: multiply;       // 正片疊底
  mix-blend-mode: screen;         // 濾色
  mix-blend-mode: overlay;        // 疊加
  mix-blend-mode: darken;         // 變暗
  mix-blend-mode: lighten;        // 變亮
  mix-blend-mode: color-dodge;    // 顏色減淡
  mix-blend-mode: color-burn;     // 顏色加深
  mix-blend-mode: hard-light;     // 強光
  mix-blend-mode: soft-light;     // 柔光
  mix-blend-mode: difference;     // 差值
  mix-blend-mode: exclusion;      // 排除
  mix-blend-mode: hue;            // 色相
  mix-blend-mode: saturation;     // 飽和度
  mix-blend-mode: color;          // 顏色
  mix-blend-mode: luminosity;     // 亮度
  
  mix-blend-mode: initial;
  mix-blend-mode: inherit;
  mix-blend-mode: unset;
}

除去 initial 默認、inherit 繼承 和 unset 還原這 3 個全部 CSS 屬性均可以取的值外，還有另外的 16 個具體的取值，對應不一樣的混合效果。

若是不是專業的 PSer 每天和混合模式打交道，想要記住這麼多效果，仍是挺困難的。不過有前人幫咱們總結了一番，看看如何比較好的理解或者說記憶這些效果，摘自Photoshop中高級進階系列之一——圖層混合模式原理：

固然，上圖是 PS 中的混合模式，數量比 CSS 中的多出幾個，可是分類仍是通用的。

 

mix-blend-mode 實例

眼見爲實，要會使用 mix-blend-mode ，關鍵仍是要邁出使用這一步。這裏我寫了一個簡單的 Demo，包括了全部的混合模式，能夠大概試一下各個模式的效果：

CodePen Demo（-webkit- Only）

固然，僅僅是這樣是感覺不到混合模式的魅力的，下面就列舉幾個利用了混合模式製做的 CSS 動畫。

 

使用 mix-blend-mode: screen 濾色模式製做 loading 效果

爲了照顧某些訪問 codepen 慢同窗，特地製做了該效果的 Gif，看看效果：

CodePen Demo（-webkit- Only）

這裏使用了 mix-blend-mode: screen 濾色模式，這是一種提亮圖像形混合模式。濾色的英文是 screen，也就是兩個顏色同時投影到一個屏幕上的合成顏色。具體作法是把兩個顏色都反相，相乘，而後再反相。簡單記憶爲"讓白更白，而黑不變"。（不必定十分準確，若有錯誤還請指正）

咱們將三個 div 按照不一樣延時(animation-delay)小幅度旋轉起來，來達到一種很顯眼很魔性的效果，適合作 loading 圖。

 

使用 mix-blend-mode: difference 差值模式

再舉個例子， mix-blend-mode: difference 差值模式。查看每一個通道中的顏色信息，比較底色和繪圖色，用較亮的像素點的像素值減去較暗的像素點的像素值。與白色混合將使底色反相；與黑色混合則不產生變化。

通俗一點就是上方圖層的亮區將下方圖層的顏色進行反相，暗區則將顏色正常顯示出來，效果與原圖像是徹底相反的顏色。

看看利用了這個混合模式，運用在一些多圖層效果裏，能夠產生十分絢爛的混合效果：

CodePen Demo（-webkit- Only）

上圖看似複雜，其實瞭解原理以後很是的簡單，6 個旋轉的 div ，經過 mix-blend-mode: difference 混合在一塊兒。

 

使用多混合模式製做文字故障效果

最後，想到我以前製做的一個文字故障效果，也能夠很好的融合混合模式，製做出下列效果：

CodePen Demo（-webkit- Only）

不用懷疑你的眼睛，上圖的效果是純 CSS 實現的效果，運用了多種顏色混合模式實現顏色疊加，變亮等效果。

本文涉及的專業理論知識不多，沒有用很大的篇幅去描述每個混合模式的效果及做用。我對混合模式的理解也比較粗淺，本文旨在經過一些 Demo 讓讀者學會開始去使用這些混合模式效果，俗話說修行在我的，若是真的感興趣的能夠自行深刻研究。

 

兼容性

最後，看一眼兼容性吧，這種奇妙的屬性兼容性一般都不怎麼好，我以前幾篇文章也提到過了，面向將來編程，因此本文的 CodePen Demo 都要求在 -webkit- 內核瀏覽器下觀看：

到此本文結束，若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。