{
  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，包括了所有的混合模式，可以大概试一下各个模式的效果：

title="mix-blend-mode 混合模式示例" src="https://codepen.io/Chokcoco/embed/LyOozE/?height=265&theme-id=0&default-tab=html,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

CodePen Demo（-webkit- Only）

当然，仅仅是这样是感受不到混合模式的魅力的，下面就列举几个利用了混合模式制作的 CSS 动画。

使用

mix-blend-mode: screen

滤色模式制作 loading 效果

为了照顾某些访问 codepen 慢同学，特意制作了该效果的 Gif，看看效果：

title="mix-blend-mode: screen" src="http://codepen.io/Chokcoco/embed/zwPyWj/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

CodePen Demo（-webkit- Only）

这里使用了

mix-blend-mode: screen

滤色模式，这是一种提亮图像形混合模式。滤色的英文是 screen，也就是两个颜色同时投影到一个屏幕上的合成颜色。具体做法是把两个颜色都反相，相乘，然后再反相。简单记忆为"让白更白，而黑不变"。（不一定十分准确，如有错误还请指正）

我们将三个 div 按照不同延时(

animation-delay

)小幅度旋转起来，来达到一种很显眼很魔性的效果，适合做 loading 图。

使用

mix-blend-mode: difference

差值模式

再举个例子，

mix-blend-mode: difference

差值模式。查看每个通道中的颜色信息，比较底色和绘图色，用较亮的像素点的像素值减去较暗的像素点的像素值。与白色混合将使底色反相；与黑色混合则不产生变化。

通俗一点就是上方图层的亮区将下方图层的颜色进行反相，暗区则将颜色正常显示出来，效果与原图像是完全相反的颜色。

看看利用了这个混合模式，运用在一些多图层效果里，可以产生十分绚烂的混合效果：

title="pureCssAnimation(webkit Only)" src="http://codepen.io/Chokcoco/embed/VbMrKX/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

CodePen Demo（-webkit- Only）

上图看似复杂，其实了解原理之后非常的简单，6 个旋转的 div ，通过

mix-blend-mode: difference

混合在一起。

使用多混合模式制作文字故障效果

最后，想到我之前制作的一个文字故障效果，也可以很好的融合混合模式，制作出下列效果：

title="mixblendmode制作文字故障效果" src="http://codepen.io/Chokcoco/embed/RVxbWW/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

CodePen Demo（-webkit- Only）

不用怀疑你的眼睛，上图的效果是纯 CSS 实现的效果，运用了多种颜色混合模式实现颜色叠加，变亮等效果。

本文涉及的专业理论知识很少，没有用很大的篇幅去描述每一个混合模式的效果及作用。我对混合模式的理解也比较粗浅，本文旨在通过一些 Demo 让读者学会开始去使用这些混合模式效果，俗话说修行在个人，如果真的感兴趣的可以自行深入研究。

兼容性

最后，看一眼兼容性吧，这种奇妙的属性兼容性通常都不怎么好，我之前几篇文章也提到过了，面向未来编程，所以本文的 CodePen Demo 都要求在

-webkit-

内核浏览器下观看：

到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

码农公寓

谈谈一些有趣的CSS题目（十七）-- 不可思议的颜色混合模式 mix-blend-mode

`mix-blend-mode`
概述

`mix-blend-mode`
实例

使用
`mix-blend-mode: screen`
滤色模式制作 loading 效果

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

使用多混合模式制作文字故障效果

兼容性

码农公寓

mix-blend-mode 概述

mix-blend-mode 实例

使用 mix-blend-mode: screen 滤色模式制作 loading 效果

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

使用多混合模式制作文字故障效果

兼容性

相关文章

`mix-blend-mode`
概述

`mix-blend-mode`
实例

使用
`mix-blend-mode: screen`
滤色模式制作 loading 效果

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