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

最新推荐文章于 2023-07-31 09:19:49 发布

编程-老鸟

最新推荐文章于 2023-07-31 09:19:49 发布

阅读量380

点赞数

CC 4.0 BY-SA版权

文章标签： css html html5 css3

本文链接：https://blog.csdn.net/PC_372/article/details/114293740

本文探讨了如何使用CSS的background和mask属性创建独特的背景图案。通过mask属性对图案进行切割，结合CSS-Doodle库生成随机图案，展示了多种背景设计的可能性。文章还介绍了-webkit-mask-composite属性在多重mask叠加时的作用，鼓励读者尝试创作出更多美妙的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 可以指定多个，逗号分隔。

假设我们有这样一张背景图：

:root {
    $colorMain: #673ab7;
    $colorSub: #00bcd4;
}
div {
    background: linear-gradient(-60deg, $colorMain, $colorSub);
}
复制代码

我们的 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 的话大概是这样：