神奇的mix-blend-mode: difference

---

• 之前安装过CSDN的浏览器插件，右下角有一个DARK模式切换功能
  
• 出于好奇，今天就想了解一下它的原理，结果发现了一个神奇的css属性：mix-blend-mode

切换前

切换后

解析

• 发现在body标签下多了几个标签：
  
• 最后锁定在第二个div标签
• 原理其实也很简单，在打开模式后，会在标签上多加几个class
  
• 其中的.darkmode-layer这个class是这样的：

 position: fixed;
 pointer-events: none;
 background: #fff;
 transition: all 0.3s ease;
 mix-blend-mode: difference;

• 这个div是铺满整个页面的，背景为白色#ffffff，重点就是这个mix-blend-mode: difference;，原谅我的孤陋寡闻，之前从没有见过这个属性，所以特意查了一下
• mix-blend-mode ：属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
• 可取的值有：

  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: difference;，也即是差值，这样就可以将整个页面转成和原来页面相反的颜色差值页面了，包括图片。
• 不得不说css真牛逼~
• 之后也可以在需要切换模式的项目中试着使用一下这个属性了
• 自古有言：好东西，兼容性绝对不咋滴~
  

---