Mix-blend-mode

01 混合模式

mix-blend-mode ，混合模式。最常见于 photoshop 中，是 PS 中十分强大的功能之一。在 CSS 中，我们可以利用混合模式将多个图层混合得到一个新的效果。

我们使用 repeating-linear-gradient 重复线性渐变，制作两个角度相反的背景条纹图。正常而言，不使用混合模式，将两个图案叠加在一起，看看会发生什么。

这些都是ps中一些图形叠加的一些方式；

可以看到，不同的混合模式的叠加，效果相差非常之大。当然，运用不同的混合模式，我们也就可以创造出效果各异的图案。

02 借助 CSS-Doodle 随机生成图案

到这，就不得不引出一个写 CSS 的神器 — CSS-Doodle，我在其他非常多文章中也多次提到过 CSS-doodle，简单而言，它是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，并且提供各种便捷的指令及函数（随机、循环等等），让我们能通过一套规则，得到不同 CSS 效果。

还是以上面的 DEMO 作为示例，我们将 repeating-linear-gradient 生成的重复条纹背景的颜色、粗细、角度随机化、采用的混合模式也是随机选取，然后利用 CSS-Doodle，快速随机的创建各种基于此规则的图案：

03 在不同的渐变背景中运用混合模式

html, body {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    padding-bottom: 100px;
}
div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
div:nth-child(1) {
    background: linear-gradient(
        238deg,
        rgb(130, 255, 0) 0%,
        rgb(0, 84, 166) 100%
    );
    animation: move 12s infinite linear;
}
div:nth-child(2) {
    background: linear-gradient(238deg, rgb(33, 200, 69) 0%, rgb(0, 0, 100) 100%);
    mix-blend-mode: overlay;
    animation: move 6s infinite linear;
}
div:nth-child(3) {
    background: linear-gradient(238deg, rgb(200, 255, 255) 48%, rgb(3, 0, 151) 100%);
    mix-blend-mode: multiply;
    animation: move 6s infinite linear;
}
div:nth-child(4) {
    background: radial-gradient(
        100% 85% at 0% 100%,
        rgb(0, 0, 0) 0%,
        rgb(0, 131, 255) 50%,
        rgb(255, 0, 0) 100%
    );
    mix-blend-mode: difference;
    animation: move 6s infinite linear;
}
div:nth-child(5) {
    background: radial-gradient(
        100% 225% at 0% 100%,
        rgb(255, 0, 0) 0%,
        rgb(66, 255, 0) 100%
    );
    mix-blend-mode: difference;
    animation: move 6s infinite linear;
}
div:nth-child(6) {
    background: radial-gradient(
        100% 140% at 100% 0%,
        rgb(0, 134, 62) 0%,
        rgb(0, 239, 255) 50%,
        rgb(0, 113, 186) 100%
    );
    mix-blend-mode: overlay;
    animation: move 6s infinite linear;
}
@keyframes move {
    0% {
        filter: unset;
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

04 借助 CSS-Doodle 随机生成图案

噔噔噔，没错，这里我们又可以继续把 CSS-Doodle 搬出来了。
随机的渐变，随机的混合模式，叠加在一起，燥起来吧。
使用 CSS-Doodle 随机创建不同的渐变，在随机使用不同的混合模式，让他们叠加在一起，看看效果：

<css-doodle>
    :container { 
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: 
            linear-gradient(
                @rand(1, 360)deg,
                rgb(@rand(1, 150), @rand(150, 255), 0) 0%,
                rgb(0, @rand(1, 150), @rand(150, 255)) 100%
            ),
            linear-gradient(
                @rand(1, 360)deg,
                rgb(0, @rand(150, 255), @rand(1, 150)) 0%, 
                rgb(0, 0, 0) 100%),
            linear-gradient(
                @rand(1, 360)deg,
                rgb(@rand(0, 255), @rand(0, 255), @rand(0, 255)) @rand(0, 70)%, 
                rgb(@rand(0, 255), 0, 151) 100%),
            radial-gradient(
                @rand(50, 100)% @rand(50, 100)% at @rand(0, 100)% @rand(0, 100)%,
                rgb(@rand(0, 150), @rand(0, 150), @rand(0, 150)) 0%,
                rgb(0, @rand(100, 200), @rand(200, 255)) 50%,
                rgb(@rand(150, 255), @rand(150, 255), 0) 100%
            ),
            radial-gradient(
                @rand(100, 250)% @rand(100, 225)% at 0% 100%,
                rgb(@rand(0, 255), @rand(0, 255), 0) 0%,
                rgb(@rand(0, 50), @rand(150, 255), @rand(0, 150)) 100%
            ),
            radial-gradient(
                @rand(100, 250)% @rand(100, 225)% at @rand(0, 150)% @rand(0, 225)%,
                rgb(@rand(0, 50), @rand(50, 150), 62) 0%,
                rgb(@rand(0, 50), @rand(50, 150), 255) @rand(0, 100)%,
                rgb(@rand(0, 50), @rand(50, 150), 186) 100%
            );
        background-blend-mode: 
            @pick(color-dodge, overlay, difference, difference, normal, exclusion, lighten),
            @pick(color-dodge, overlay, difference, difference, normal, exclusion, lighten),
            @pick(color-dodge, overlay, difference, difference, normal, exclusion, lighten),
            @pick(color-dodge, overlay, difference, difference, normal, exclusion, lighten),
            @pick(color-dodge, overlay, difference, difference, normal, exclusion, lighten),
            @pick(color-dodge, overlay, difference, difference, normal, exclusion, lighten);
<!--         background-blend-mode: lighten, color-dodge, multiply, difference, difference, normal; -->
    } 
</css-doodle>

05 使用 mask

我们就完成了 background 与 mask 的结合。运用 mask 切割 background 的效果，我们就能制作出非常多有意思的背景图案：

-- mask-composite OR -webkit-mask-composite

接下来，在运用 mask 切割图片的同时，我们会再运用到 -webkit-mask-composite 属性。这个是非常有意思的元素，非常类似于 mix-blend-mode / background-blend-mode。

-webkit-mask-composite: 属性指定了将应用于同一元素的多个蒙版图像相互合成的方式。
通俗点来说，他的作用就是，当一个元素存在多重 mask 时，我们就可以运用 -webkit-mask-composite 进行效果叠加。

注意，这里的一个前提，就是当 mask 是多重 mask 的时候（类似于 background，mask 也是可以存着多重 mask），-webkit-mask-composite 才会生效。这也就元素的 mask 可以指定多个，逗号分隔。

mask 表述成 background 的话大概是这样：

如果，不添加任何 -webkit-mask-composite，叠加融合之后的效果是这样：

如果添加一个 -webkit-mask-composite: xor，则会变成这样：

可以看到，线条的交汇叠加处，有了不一样的效果。

06 借助 CSS-Doodle 随机生成图案

了解了基本原理之后，上 CSS-Doodle，我们利用多重 mask 和 -webkit-mask-composite，便可以创造出各式各样的美妙背景图案：