测试2

本文接前文：不可思议的混合模式 mix-blend-mode 。由于 mix-blend-mode 这个属性的强大，很多应用场景和动效的制作不断完善和被发掘出来，遂另起一文继续介绍一些使用 mix-blend-mode 制作的酷炫动画。

CSS3 新增了一个很有意思的属性 -- mix-blend-mode ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。

混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。

 

mix-blend-mode 简介

关于 mix-blend-mode 最基本的用法和描述，可以简单看看上篇文章 不可思议的混合模式 mix-blend-mode。

 

background-blend-mode 简介

除了 mix-blend-mode ，CSS 还提供一个 background-blend-mode 。也就是背景的混合模式。

  • 可以是背景图片与背景图片的混合，
  • 也可以是背景图片和背景色的之间的混合。

background-blend-mode 的可用取值与 mix-blend-mode一样，不重复介绍，下面直接进入应用阶段。

 

background-blend-mode 基础应用

对于 background-blend-mode ，最简单的应用就是将两个或者多个图片利用混合模式叠加在一起。假设我们存在下述两张图片，可以利用背景混合模式 background-blend-mode 叠加在一起：

person
timg

经过背景混合模式 background-blend-mode:lighten 处理之后：

image

CodePen Demo -- image mix by bg-blend-mode

当然，这里使用的是 background-blend-mode:lighten 变亮这个混合模式，核心代码如下：

<div class="container"></div>
.container {
    background: url($pic1), url($pic2);
    background-size: cover;
    background-blend-mode: lighten;
}

我们可以尝试其他的组合，也就是改变 background-blend-mode 的各种取值，将会得到各种不同的感官效果。

 

使用 background-blend-mode: difference 制作黑白反向动画

黑色白色这两种颜色，无疑是使用频率最高也是我认为最搭的两个颜色。当这两种颜色结合在一起，总是能碰撞出不一样的火花。

扯远了，借助 difference 差值混合模式，配合黑白 GIF，能产生奇妙的效果，假设我们拥有这样一张 GIF 图（图片来自网络，侵删）：

timg

利用 background-blend-mode: difference ，将它叠加到不同的黑白背景之下（黑白背景由 CSS 画出来）：

image

产生的效果如下：

bg-gif