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