CSS奇思妙想-使用background创造美妙背景(下篇)

CSS奇思妙想 -- 使用 background 创造各种美妙的背景（下篇）...

使用 mask

除去混合模式，与背景相关的，还有一个非常有意思的属性 -- MASK。

mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

对 mask 的一些基础用法还不太熟悉的，可以先看看我的这篇文章 -- 奇妙的 CSS MASK。

简单而言，mask 可以让图片我们可以灵活的控制图片，设定一部分展示出来，另外剩余部分的隐藏。

使用 mask 对图案进行切割

举个例子。假设我们使用 repeating-linear-gradient 渐变制作这样一个渐变图案：

它的 CSS 代码大概是这样：

:root {
    $colorMain: #673ab7;
}
{
    background: 
        repeating-linear-gradient(0, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px),
        repeating-linear-gradient(60deg, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px),
        repeating-linear-gradient(-60deg, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px);
}

如果我们给这个图案，叠加一个这样的 mask ：

{
    mask: conic-gradient(from -135deg, transparent 50%, #000);
}

上述 mask 如果是使用 background 表示的话，是这样 background: conic-gradient(from -135deg, transparent 50%, #000), 图案是这样：

两者叠加在一起，按照 mask 的作用，背景与 mask 生成的渐变的 transparent 的重叠部分，将会变得透明。将会得到这样一种效果：

CodePen Demo -- mask & background Demo

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

CodePen Demo -- mask & background Demo

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: conic-gradient(from -135deg, transparent 50%, #000);
}

我们的 mask 如下：

{
    mask: 
            repeating-linear-gradient(30deg, #000 0, #000 10px, transparent 10px, transparent 45px),
            repeating-linear-gradient(60deg, #000 0, #000 10px, transparent 10px, transparent 45px),
            repeating-linear-gradient(90deg, #000 0, #000 10px, transparent 10px, transparent 45px);
}

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

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

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

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

CodePen Demo -- background & -webkit-mask-composite

借助 CSS-Doodle 随机生成图案

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

是不是很类似万花筒？

借助了 CSS-Doodle，我们只设定大致的规则，辅以随机的参数，随机的大小。接着就是一幅幅美妙的背景图应运而生。

下面是运用上述规则的尝试的一些图案：

CodePen Demo -- CSS Doodle - CSS MASK Background

当然，可以尝试变换外形，譬如让它长得像个手机壳。

下面两个 DEMO 也是综合运用了上述的一些技巧的示例，仿佛一个个手机壳的图案。

CodePen Demo -- CSS Doodle - CSS MASK Background 2

CodePen Demo -- CSS Doodle - CSS MASK Background 3

总结一下

背景 background 不仅仅只是纯色、线性渐变、径向渐变、角向渐变。混合模式、滤镜、遮罩也并不孤独。

当 background 配合混合模式 mix-blend-mode，background-blend-mode、滤镜 filter、以及遮罩 mask 的时候，它们就可以组合变幻出各种不同的效果。

到目前为止，CSS 已经越来越强大，它不仅仅可以用于写业务，也可以创造很多有美感的事物，只要我们愿意去多加尝试，便可以创造出美妙的图案。