2. 程式人生 > >神奇的CSS3混合模式

神奇的CSS3混合模式

阿新 • • 發佈：2019-01-05

對於前端開發人員應該都很熟悉Photoshop的圖層混合模式，就是幾個圖層按不同的模式進行混合，實現不同的影象效果。但是當我們前端同學在切這些效果圖的時候，基本上就是一刀切的，即使是文字，當字型很炫的話，我們也不得不用切圖來替代。實際上在16年CSS3就新增了一個很有意思的屬性 -- mix-blend-mode，我們稱之為混合模式，它類同於ps的混合模式，也就是說在CSS中我們也可以利用混合模式製作出一些效果。

先引出一個小例子，我們來看下css3混合模式到底可以實現一個什麼樣的效果

有這樣一個需求，當文字跨越一個與自身顏色相似的區域時，怎麼實現顏色反轉？

  1. body {

  2.    text-align

    : center;

  3.    font-family: sans-serif;

  4.    color:#000;

  5.    background-image: linear-gradient(90deg,#fff 49.9%,#00050%);

  6. }

  7. h1 {

  8.    font-size:10vw;

  9. }

按照上面的做法，效果是這樣的，“HELLO”的右半部分是完全不可見的

640?wx_fmt=png

那麼要想實現右半部分可見且字型顯示白色，我們以往的做法無非就兩種：

  • 把文字變成圖片

  • 寫一大堆css實現，總之css應該是能實現的 但是有了css3的混合模式，我們可以直接將文字的顏色翻轉到黑色背景中，兩行css程式碼就搞定了。

  1. h1 {

  2.    color:#fff;

  3.    mix

    -blend-mode: difference;

  4. }

640?wx_fmt=png

是不是很強大，很easy的就實現了我們的需求。那麼在上面的例子中用到了mix-blend-mode: difference;混合模式的差值模式，到底css3有幾種與混合模式相關的屬性，取值又都有哪些，我們先看一下基礎概念，再舉一些基礎應用的例子。

CSS3 mix-blend-mode 和 background-blend-mode

本節主要講下css3混合模式的mix-blend-mode和background-blend-mode兩個屬性，兩個屬性的取值是一樣的，不一樣的是：

  • mix-blend-model屬性用來定義元素與背景的混合模式，可以是元素與背景圖片的混合，也可以是元素與背景色的混合

  • background-blend-mode屬性用來定義背景的混合模式，可以是背景圖片與背景圖片的混合，也可以是背景圖片和背景色的混合

引題的小例子就是用的mix-blend-mode屬性，實現的是文字和背景圖的混合。下面介紹一下混合模式的取值情況，我們首先學習3個術語：基色，混合色和結果色。

  • 基色：指當前圖層之下的圖層顏色。

  • 混合色：指當前圖層的顏色。

  • 結果色：指混合後得到的顏色。

normal正常直接返回結果色
multiply正片疊底檢視每個通道中的顏色資訊，並將基色與混合色複合
screen濾色與“正片疊底”相反，檢視每個通道的顏色資訊，將影象的基色與混合色結合起來產生比兩種顏色都淺的第三種顏色
overlay疊加把影象的基色與混合色相混合產生一種中間色。
darken變暗檢視每個通道中的顏色資訊，並選擇基色或混合色中較暗的顏色作為結果色
lighten變亮檢視每個通道中的顏色資訊，並選擇基色或混合色中較亮的顏色作為結果色
color-dodge顏色減淡檢視每個通道中的顏色資訊，並通過減小對比度使基色變亮以反映混合色。與黑色混合則不發生變化
color-burn顏色加深檢視每個通道中的顏色資訊，並通過增加對比度使基色變暗以反映混合色，如果與白色混合的話將不會產生變化
hard-light強光產生一種強光照射的效果。如果混合色比基色更亮一些，那麼結果色將更亮；如果混合色比基色更暗一些，那麼結果色將更暗
soft-light柔光產生一種柔光照射的效果。如果混合色比基色更亮一些，那麼結果色將更亮；如果混合色比基色更暗一些，那麼結果色將更暗，使影象的亮度反差增大
difference差值檢視每個通道中的顏色資訊，從影象中基色的亮度值減去混合色的亮度值，如果結果為負，則取正值，產生反相效果
exclusion排除與“差值”模式相似，但是具有高對比度和低飽和度的特點。比用“差值”模式獲得的顏色要柔和、更明亮一些
hue色相選擇基色的亮度和飽和度值與混合色進行混合而建立的效果，混合後的亮度及飽和度取決於基色，但色相取決於混合色
saturation飽和度在保持基色色相和亮度值的前提下，只用混合色的飽和度值進行著色。基色與混合色的飽和度值不同時，才使用混合色進行著色處理。若飽和度為0，則與任何混合色疊加均無變化。當基色不變的情況下，混合色影象飽和度越低，結果色飽和度越低；混合色影象飽和度越高，結果色飽和度越高
color顏色引用基色的明度和混合色的色相與飽和度建立結果色。它能夠使用混合色的飽和度和色相同時進行著色，這樣可以保護影象的灰色色調，但結果色的顏色由混合色決定。顏色模式可以看作是飽和度模式和色相模式的綜合效果，一般用於為影象新增單色效果
luminosity亮度能夠使用混合色的亮度值進行著色，而保持基色的飽和度和色相數值不變。其實就是用基色中的“色相”和“飽和度”以及混合色的亮度建立結果色

這些api是不是看著頭大，我也是看了前幾個還行，後面就暈了，那不妨給他們歸歸類

分類名稱darken,multiply,color-burn介紹
降暗混合模式亮度減色，濾掉影象中高亮色，使影象變暗
加亮混合模式screen,lighten,color-dodge加色模式，濾掉影象中暗色，使影象變亮
融合混合模式overlay,soft-light,hard-light不同程度的圖層融合
變異混合模式difference,exclusion,hard-light用於製作各種變異的圖層混合
色彩疊加混合模式hue,saturation,color,luminosity根據圖層的色相，飽和度等基本屬性，完成圖層融合

歸類後更清晰一些，知道哪些取值大概可以實現什麼效果了，好了，理論說這麼多，我們還是來具體看看這些混合模式到底可以製作出來什麼樣的炫酷效果吧~

效果展示

* 各種文字效果

我們可以用mix-blend-mod製作出混合文字和文字背景圖，之前做頁面碰到混合文字類的，因為重疊部分顯示顏色的問題，我們往往是把文字切出來一個圖片實現的，現在用css3的混合模式可以輕易實現了；文字背景圖也很簡單，我們只需要構造出黑色文字，白色底色的文字div ，疊加上圖片，再運用 mix-blend-mode即可。 核心程式碼如下，簡單看一下：

  1. <divclass="container1">

  2. <divclass="isolateContainer">

  3. <span>Colorful</span>

  4. <span>words</span>

  5. </div>

  6. </div>

  7. <divclass="container2">

  8. <divclass="pic"></div>

  9. <divclass="text">CHINA</div>

  10. </div>

  11. .container1{

  12.  width: 100%;

  13.  height: 200px;

  14.  text-align: center;

  15.  border: 1px solid #000;

  16.  padding: 2px;

  17.  background: #fff;

  18.  .isolateContainer{

  19.    isolation: isolate;

  20.  }

  21.  span {

  22.    font-size: 5em;

  23.    font-weight: bold;

  24.    display: block;

  25.    color: red;

  26.    &:last-child {

  27.      margin-top: -1em;

  28.      color: #1AD6AC;

  29.      mix-blend-mode: difference;

  30.    }

  31.  }

  32. }

  33. .container2 {

  34.    position: relative;

  35.    width: 100%;

  36.    height: 300px;

  37.    .pic {

  38.        position: relative;

  39.        width: 100%;

  40.        height: 100%;

  41.        background: url($img) no-repeat;

  42.        background-position:center;

  43.    }

  44.    .text {

  45.        position: absolute;

  46.        top: 50%;

  47.        left: 50%;

  48.        transform: translate(-50%, -50%);

  49.        font-size:9em;

  50.        line-height:320px;

  51.        width:100%;

  52.        height:100%;

  53.        font-weight:bold;

  54.        text-align:center;

  55.        color: #000;

  56.        mix-blend-mode: lighten;

  57.        background-color: #fff;

  58.    }

  59. }

640?wx_fmt=png

我們發現在混合文字的例子中，用到了isolation: isolate這個css3屬性，這個屬性正如其語義，就是隔離的意思，那隔離什麼呢？是用來隔離mix-blend-mode元素的混合的。當元素應用了混合模式的時候，預設情況下，其會混合所有層疊順序比其低的層疊元素。像文字混合的例子中，我們不用隔離屬性的話，文字顏色還會混合白色背景，“words”顯示的就不是綠色了，但是，我們就希望混合模式只用到某一個元素，不向下滲透了的話，isolation: isolate就派上用場了，它會阻斷混合模式的進行，允許使一組元素從它們後面的背景中獨立出來，只混合這組元素。大家有興趣的話可以研究下這個屬性。

* hover改變圖示的顏色

之前我們想hover改變一個icon的顏色，基本上也是切出來兩個圖，原始的一個，hover後加顏色的一個來回切換的，實際上我們這樣的互動應用還挺多，像“收藏”按鈕、著重提示按鈕等，但是有了css3混合模式，還是那句話，兩行程式碼統統搞定這些效果，不管是漸變、純色皆可以，下面看下漸變色hover的效果圖：

640?wx_fmt=gif

* 動畫

看了上面一個簡單的hover動畫後，我想到了之前公眾號里老推的智力或者心理疲勞度測試題，就是一張圖老在那動，動的你頭暈，看你能堅持幾秒。我們用黑白兩種顏色加上css3的混合模式就能做出那種動效，我發現黑白這兩種顏色在一起總能碰撞出不一樣的火花，利用黑白的差值模式，可以實現這個萬花筒的動效。

640?wx_fmt=gif

總結

大概介紹到這裡，實際上即使已知每種混合模式的定義，也很難預測如何應用某種混合模式會影響混合元素，所以選擇混合模式通常是一個反覆試驗的過程，但是在實驗的過程中我們用純CSS，幾行程式碼就能實現了這些很炫的效果，是不是很奇妙。感興趣的同學可以用這些屬性做些小動畫，小遊戲也是極好的。 但這麼炫的屬性，用的都不是很多，很大原因也是因為相容性的問題，我們來看一下相容情況：

640?wx_fmt=png

可以看到相容性不是很好，所以用的時候，最好判斷一下瀏覽器的相容性，推薦兩種方法，以上面引題的例子做說明

  • 一種是用js判斷相容性

  1. // JS

  2. if("CSS"in window &&"supports"in window.CSS){

  3. var support = window.CSS.supports("mix-blend-mode","difference");

  4.    support = support?"mix-blend-mode":"no-mix-blend-mode";

  5.    document.documentElement.className += support;

  6. }

  7. // CSS

  8. h1 { color:#000; }

  9. .mix-blend-mode body {

  10.    background-image: linear-gradient(90deg,#fff 49.9%,#00050%);

  11. }

  12. .mix-blend-mode h1 {

  13.    color:#fff;

  14.    mix-blend-mode: difference;

  15. }

  • 另一種是直接用CSS中的@supports

  1. @supports(mix-blend-mode: difference){

  2.    body {

  3.        background-image: linear-gradient(90deg,#fff 49.9%,#00050%);

  4. }

  5.    h1 {

  6.        color:#fff;

  7.        mix-blend-mode: difference;

  8. 相關推薦

    神奇的CSS3混合模式

    對於前端開發人員應該都很熟悉Photoshop的圖層混合模式，就是幾個圖層按不同的模式進行混合，

    CSS3混合模式的一次實踐

    相關介紹連結： CSS3中的mix-blend-mode和background-blend-mode css mix-blend-mode 混合模式 <!doctype html> <html lang="en"> <head> <meta c

    PS 中混合模式

    image ron strong 混合模式 陰影 亮度 兩層 分享 log 1.正常模式 2. 溶解 3. 變暗 ： 把兩幅圖中較暗的區域顯示出來 4.正片疊底 總體變暗，把圖層中較淺的顏色由下一圖層較深的顏色顯現（和濾色相反） 7. 深

    【錯誤】混合模式程序集是針對“v2.0.50727”版的運行時生成的，在沒有配置其他信息的情況下，無法在 4.0 運行時中加載該程序集。

    csharp 技術分享 image framework src sharp ted 程序集 方案 解決方案，在app.config中添加一個配置節：startup <?xml version="1.0" encoding="utf-8" ?> <

    PS中混合模式是什麽意思？

    變亮 透明 似的 色值 處理 一個 疊加 linear 結果 ?PS中圖層混合模式中的溶解，變暗，正片疊底，顏色加深，線性加深，疊加，柔光，亮光，強光，線性光，點光，實色混合，差值，排除，色相，飽和度，顏色，亮度各是什麽原理? ?Normal 正常模式，也是

    不可思議的混合模式 background-blend-mode

    version 而是 用法 由於 pen 多應用 構造 blog photo 本文接前文：不可思議的混合模式 mix-blend-mode 。由於 mix-blend-mode 這個屬性的強大，很多應用場景和動效的制作不斷完善和被發掘出來，遂另起一文繼續介紹一些使用 mix

    JS面向對象基礎講解(工廠模式、構造函數模式、原型模式、混合模式、動態原型模式)

    由於 不能識別 訪問 rip 思想 sta info hang eat 這篇文章主要介紹了面向對象JS基礎講解，工廠模式、構造函數模式、原型模式、混合模式、動態原型模式,需要的朋友可以參考下 什麽是面向對象？面向對象是一種思想！（廢話）。 　　面向對象可以把程序中的關

    關於js的設計模式（簡單工廠模式，構造函數模式，原型模式，混合模式，動態模式）

    nod nodejs 重新 作用域 this 一次 無法 typeof 訪問 <1>工廠模式 簡單來說就是封裝後的代碼，簡單的工廠模式是很好理解的，關於它的作用，就是利用面向對象的方法，把一些對象封裝，使一些占用空間多的，重復的代碼封裝起來。實現方法非常簡單，也

    移動端獲取用戶在屏幕滑動方向（javascript）混合模式封裝

    load clas rip UNC st2 onload console doc list 註意:無法使用touchend來獲取clientX，touchend是在用戶滑動結束之後才回調 <!DOCTYPE html> <html> <hea

    混合模式為什麽成為占有率最高的app開發技術

    支持 權限 崩潰 一個 必須 矛盾 諸多 新的 界面 在企業移動戰略布局中，app已成為連接業務與用戶最主要的載體，同樣其開發技術目前也處於十分成熟的階段，而從技術實現的角度去考量，很多從業者可能並不知道，越是大企業、越是IT預算多的企業，他們的移動app大部分是基於混

    JavaScript繼承基礎講解，原型鏈、借用構造函數、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承

    push 需要 覆蓋 pan 只需要 童鞋 java var 自定義 說好的講解JavaScript繼承，可是遲遲到現在講解。廢話不多說，直接進入正題。 　　既然你想了解繼承，證明你對JavaScript面向對象已經有一定的了解，如還有什麽不理解的可以參考《面向對象JS基礎

    phalcon + nginx 混合模式配置

    quest ati split cat req script cati fas dex 配置目的： 一個子目錄下的代碼使用框架，其他部分不采用。配置如下（僅server段，其他參見nginx文檔）： server { lis

    圖像編程：濾鏡、混合模式、遮罩

    代碼 net lan mat 濾鏡 color 圖層混合模式 來源 src 濾鏡 濾鏡是對圖片中每個像素進行裝換的過程。例如，遊戲中的濾鏡經常是這樣的： var colorMatrix = [ 0.3,0.6,0,0,0, 0.3,0.6,0,0,0,

    不可思議的顏色混合模式 mix-blend-mode （轉） 談談一些有趣的CSS題目（四）-- 從倒影說起，談談 CSS 繼承 inherit 談談一些有趣的CSS題目（五）-- 單行居中，兩行居左，超過兩行省略 談談一些有趣的CSS題目（九）-- 巧妙的實現 CSS 斜線

    開本系列，談談一些有趣的 CSS 題目，題目型別天馬行空，想到什麼說什麼，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。 解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。 不斷更新，不斷更新，不斷更新，重

    Hybrid APP混合模式應用開發的經驗和總結

    寫在前面： 由於業務需要，接觸到一個Hybrid APP混合開發的專案。當時是第一次接觸混合開發，有一些經驗和總結，歡迎各位一起交流學習~ 1、混合開發概述 Hybrid App主要以JS+Native兩者相互呼叫為主，從

    零基礎個人建站——混合模式開發之專案上線那些坑 、終結

    最後說一下反向代理和域名解析。           首先說一下神魔叫反向反向代理，，你可以理解為系統的自我保護機制吧~~對外只開放一個埠，，然後電腦上的服務通過對映給代理伺服器在通過外網訪問。。是不是很拗口。 其實也很好理解 就說現

    零基礎個人建站——混合模式開發之專案上線那些坑 、四

    關於vue 打包 在開發完vue 專案後  實際上線的時候我們需要生產環境而不是開發環境  （這是句廢話 ） 這個時候  我們需要在專案下  執行 npm run build 會在專案下生成dist資料夾    然

    零基礎個人建站——混合模式開發之專案上線那些坑 、三

    關於連線mongodb資料庫 首先 安裝肯定少不了吧~~~ MongoDB 提供了 linux 各發行版本 64 位的安裝包，你可以在官網下載安裝包。 下載地址：https://www.mongodb.com/download-center#community 下載完安裝包，並

    零基礎個人建站——混合模式開發之專案上線那些坑 、二

    用nodejs 開啟我們的服務   （這裡採用KOA框架   和mongodb 資料庫）關於裡面的詳細程式碼我就不說了，，沒有基礎的同學要去努力學習~~~~ 一 、 全域性安裝koa-腳手架 1、新建專案目錄，準備在哪裡建立專案和寫程式碼，就在哪裡建立

    零基礎個人建站——混合模式開發之專案上線那些坑

    作為一個勤勞的碼農。你肯定不甘心每天在自己的電腦上自娛自樂，如何跟別人分享一下自己做過的案例呢? 今天我們就說一說關於專案上線的那些坑—————— 一、如果你實在很沒聽過下邊的這幾個概念，那今天就先來了解一下吧~~因為下邊會經常用到。  1、公網    &nbs