本文属于CSS绘图技巧之一，系列文章：在CSS中使用三角函数绘制曲线图形和显示动画[1]CSS奇思妙想——用CSS创造艺术[2]会介绍一些背景，mix-blend-mode,mask和一些相关的属性来制作一些稍微复杂和酷炫的背景。通过本文，您将了解CSS背景的一些更强大的用法，并学会以不同的方式使用一些与背景相关的属性来创建更复杂的背景图案。在这个过程中，你会更好地掌握不同的渐变技巧，对各种渐变有更深的理解。同时，借助强大的CSS-Doodle，你将学会如何使用一套规则快速创造出大量不同的随机图案，感受CSS的强大，走进CSS之美。背景基础我们都知道CSS中的背景是非常强大的。首先，让我们回顾一下基础知识。在日常生活中，我们最应该使用以下四种：纯色背景背景：#000：线性渐变背景：linear-gradient(#fff,#000)：径向渐变背景：radial-gradient(#fff,#000)：角度渐变背景：圆锥梯度（#fff，#000）：当然是高级背景。在掌握了基本的渐变之后，我们可以继续学习更复杂的背景图案。我第一次学习使用渐变来实现各种背景图案是在《CSS Secret》这本书中。然后就是不断探索尝试，总结一些经验。在尝试使用渐变来制作更复杂的背景之前，这里有一些重要的提示：渐变不仅仅是单一的linear-gradient或单一的radial-gradient，对于背景来说，它支持多个渐变的叠加，一点很重要；灵活使用repeating-linear-gradeint（repeating-radial-gradeint），可以减少很多代码量想法变成无数美丽的图案。接下来，开始组合之旅。使用mix-blend-modemix-blend-mode，混合模式。在photoshop中最常见，是PS中非常强大的功能之一。在CSS中，我们可以使用混合模式来混合多个图层以获得新的效果。混合模式的一些基本用法，可以参考我的这些文章：不可思议的颜色混合模式mix-blend-mode[3]不可思议的混合模式background-blend-mode[4]那么，我们先来试试先简单了解一下混合混合模式的功能。我们使用repeating-linear-gradient重复线性渐变来制作两个角度相反的背景条纹。通常，不使用混合模式，将两个图案叠加在一起，看看会发生什么。好吧，任何人都可以猜测会发生什么:sweat_smile:。显然，由于图案不是透明的，叠加之后，由于层次关系，只能看到其中一张图片。好吧，最重要的是，让我们添加mix-blend-mode:multiply到顶部模式，让我们再做一次，看看这次会发生什么。可以看到，加入混合模式后，两张背景图片通过某种算法叠加在一起，呈现出非常漂亮的图案效果，这正是我们想要的。CodePenDemo-Repeating-linear-gradientbackground&mix-blend-mode[5]尝试不同的mix-blend-modes，为什么上面使用mix-blend-mode:multiply？是否可以使用其他混合模式？当然可以。这里只是举个例子，mix-blend-mode：multiply在PS中是相乘的意思，属于图层混合模式的暗化模式组之一。我们使用上面的DEMO，尝试其他的混合模式，得到不同的效果。可以看出，不同混合模式的叠加效果是非常不同的。当然，使用不同的混合模式，我们可以创造出不同效果的图案。CodePenDemo-Repeating-linear-gradientbackground&mix-blend-mode[6]这里借助CSS-Doodle随机生成图案，不得不引出一个写CSS的神器——CSS-Doodle[7]，我在其他很多文章中多次提到CSS-doodle。简单的说，它是一个基于Web-Component的库。让我们可以快速创建基于CSSGrid布局的页面，并提供各种方便的指令和功能（随机、循环等），让我们通过一套规则获得不同的CSS效果。仍然以上面的DEMO为例，我们将repeating-linear-gradient生成的重复条纹背景的颜色、粗细、角度、混合方式随机化，然后使用CSS-Doodle快速随机创建各种基于图案的图案这条规则：大家可以点击试试，点击鼠标可以随机生成不同的效果：CodePenDemo--CSSDoodle-CSSMIX-BLEND-MODEBackground[8]尝试使用径向渐变当然，上面使用线性渐变，同样，我们可以用径向渐变做同样的事情。我们可以使用径向渐变来生成多个径向渐变。像这样：给图片应用background-size，它会是这样的：和上面一样，我们把图形稍微变形一点，然后叠加两层，加上一个CSS样式mix-blend-mode:darken:CodePenDemo--radial-gradient&mix-blend-modeDemo[9]借助CSS-Doodle随机生成图案这里我们再次使用CSS-Doodle，将上述规则应用于径向渐变，还可以得到一系列有趣的效果背景图像。大家可以点进去试试，点击鼠标可以随机生成不同的效果：CodePenDemo--CSSDoodle-CSSMIX-BLEND-MODEBackground2[10]当然，上面的叠加都是很简单的叠加patterns，但是掌握了这个原理之后，你可以自己尝试去创造更复杂的融合。:dog:上面的叠加效果是基于大面积纯色的叠加。当然，mix-blend-mode也可以和真实的渐变碰撞出更多的火花。在不同渐变背景上使用混合模式在不同渐变背景上使用混合模式？会产生什么样的奇妙效果呢？应用得当，可能是这个样子：嗯，跟上面的条纹图案完全不一样。您可以进入gradienta.io[11]以获取使用CSS创建的渐变叠加背景图案的完整库。使用混合模式叠加不同的渐变图案下面，让我们也实现一个。首先，我们使用线性渐变或者径向渐变，随意创建几个渐变图案，如下图：然后，我们使用混合模式相互叠加，从第二层开始，一共需要设置5个blends模式，这里我用的是overlay，multiply，difference，difference，overlay。看叠加效果，很不错：CodePenDemo--Graideintbackgroundmix[12]因为上面的动画GIF压缩率很高，所以看起来很锯齿，图像很模糊，可以点击上面的链接看一下。然后，我们可以给叠加的图片加一个滤镜：hue-rotate()，让他动起来，放大一点看效果，绚丽的光影效果：CodePenDemo--Graideintbackgroundmix2[13]使用CSS-Doodle来随机生成图案，没错，这里我们可以继续把CSS-Doodle搬出去。随机渐变，随机混合模式，叠加在一起，干起来吧。使用CSS-Doodle随机创建不同的渐变，随机使用不同的混合模式，让它们叠加，看效果：当然，因为是完全随机生成的，所以生成的效果有时不是很好看或者直接是纯色.但是他们中的大多数都很好:joy:CodePenDemo--CSSDoodleMixGradient[14]感谢您的坚持，请看这里。以上上半段主要用到的混合模式，接下来，下半段将主要用到mask，精彩继续。使用mask去除混合模式，跟背景有关，还有一个很有意思的属性——MASK。mask[15]被翻译成掩码。在CSS中，mask属性允许用户通过屏蔽或裁剪图像的特定区域来隐藏元素的部分或全部可见区域。如果你不熟悉mask的一些基本用法，可以先看我的文章——精彩的CSSMASK[16]。简单来说，蒙版可以让我们灵活的控制图片，设置一部分显示，其余部分隐藏。以蒙版裁剪图案为例。假设我们使用repeating-linear-gradient来制作这样一个渐变图案：它的CSS代码大概是这样的：:root{$colorMain:#673ab7;}{background:repeating-linear-gradient(0,$colorSub0,$colorSub3px,transparent3px,transparent10px),repeating-linear-gradient(60deg,$colorSub0,$colorSub3px,transparent3px,transparent10px),repeating-linear-gradient(-60deg,$colorSub0,$colorSub3px,transparent3px,transparent10px);}如果我们给这个模式,叠加一个mask是这样的:{mask:conic-gradient(from-135deg,transparent50%,#000);}如果上面的mask用background表示，就是这样background:conic-gradient(from-135deg,transparent50%,#000),pattern是这样的：两者叠加在一起，根据遮罩的作用，背景重叠部分和遮罩产生的渐变透明会变得透明。你会得到这样的效果：CodePenDemo--mask&backgroundDemo[17]我们已经完成了背景和mask的结合。使用遮罩裁切背景效果，我们可以制作出很多有趣的背景图案：CodePenDemo--mask&backgroundDemo[18]mask-compositeOR-webkit-mask-composite接下来，同时使用遮罩裁切图片，然后我们将应用-webkit-mask-composite属性。这是一个非常有趣的元素，与mix-blend-mode/background-blend-mode非常相似。-webkit-mask-composite[19]：该属性指定应用于同一元素的多个遮罩图像如何相互合成。通俗地说，它的作用就是当一个元素有多个遮罩时，我们可以使用-webkit-mask-composite来叠加效果。注意这里的前提条件之一是-webkit-mask-composite只有当mask有多个mask时才会生效（和背景类似，mask也可以存储多个mask）。这意味着可以多次指定元素的掩码，以逗号分隔。假设我们有这样一张背景图：:root{$colorMain:#673ab7;$colorSub:#00bcd4;}div{background:linear-gradient(-60deg,$colorMain,$colorSub);}我们的mask如下：{蒙版：重复线性渐变（30deg，#0000，#00010px，transparent10px，transparent45px），重复线性渐变（60deg，#0000，#00010px，transparent10px，transparent45px），重复线性渐变（90deg，#000,#00010px,transparent10px,transparent45px);}mask表示为背景，大致是这样的：如果不加任何-webkit-mask-composite，叠加融合后的效果是这样的：如果加一个-webkit-mask-composite:xor，就会变成这样：可以看出线条的交叉和叠加有不同的效果。CodePenDemo--背景&-webkit-mask-composite[20]在使用CSS-Doodle随机生成图案了解基本原理后，在CSS-Doodle上，我们可以使用多个masks和-webkit-mask-composite来创建各种模式。各种奇妙的背景图案：是不是有点像万花筒？借助CSS-Doodle，我们只设置粗略的规则，辅以随机参数，随机大小。于是一系列精彩的背景图就应运而生了。下面是一些尝试应用上述规则的图案：CodePenDemo--CSSDoodle-CSSMASKBackground[21]当然，你也可以尝试改变形状，比如让它看起来像一个手机壳。下面两个DEMO也是综合运用了上面的一些技巧的例子，比如手机壳的图案。CodePenDemo--CSSDoodle-CSSMASKBackground2[22]CodePenDemo--CSSDoodle-CSSMASKBackground3[23]总结一下背景背景不仅仅是纯色，线性渐变，径向渐变，角??度渐变。混合模式、滤镜、蒙版并不孤单。当背景与混合模式mix-blend-mode、background-blend-mode、filter和mask组合时，它们可以组合产生各种效果。到目前为止，CSS已经变得越来越强大。它不仅可以用来写生意，还可以创造出很多美好的事物。只要我们愿意多尝试，就可以创造出美丽的图案。最后，本文到此结束。看到这里，是不是迫不及待想要尝试一下呢？想亲自尝试一下吗？更多精彩的CSS技术文章汇总在我的Github——iCSS[24]，会持续更新。欢迎点个星订阅收藏。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。参考资料[1]在CSS中使用三角函数绘制曲线和显示动画：https://github.com/chokcoco/iCSS/issues/72[2]CSS奇思妙想——用CSS创作艺术：https://github.com/chokcoco/iCSS/issues/94[3]令人难以置信的混色模式mix-blend-mode:https://github.com/chokcoco/iCSS/issues/16[4]令人难以置信的混合模式背景-blend-mode:https://github.com/chokcoco/iCSS/issues/16://github.com/chokcoco/iCSS/issues/31[5]CodePenDemo-Repeating-linear-gradientbackground&mix-blend-mode:https://codepen.io/Chokcoco/pen/QWKwKbq[6]CodePen演示-重复线性渐变背景和混合混合模式：https://codepen.io/Chokcoco/pen/oNzNZyz[7]CSS-Doodle：https://css-doodle.com/[8]CodePen演示--CSSDoodle-CSSMIX-BLEND-MODE背景：https://codepen.io/Chokcoco/pen/qBaBrqE[9]CodePenDemo--radial-gradient&mix-blend-modeDemo：https://codepen.io/Chokcoco/pen/PoGwzgN[10]CodePenDemo--CSSDoodle-CSSMIX-BLEND-MODE背景2:https://codepen.io/Chokcoco/pen/mdrdxpd[11]gradienta.io:https://gradienta.io/[12]CodePenDemo--Graideint背景混合:https://codepen.io/Chokcoco/pen/GRjgQMd[13]CodePenDemo--Graideint背景混合2：https://codepen.io/Chokcoco/pen/BaLyYPv[14]CodePenDemo--CSSDoodleMixGradient：https：//codepen.io/Chokcoco/pen/abdaGWL[15]掩码：https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask[16]神奇的CSSMASK：https://github.com/chokcoco/iCSS/issues/80[17]CodePenDemo--mask&backgroundDemo:https://codepen.io/Chokcoco/pen/ExgaROZ[18]CodePenDemo--mask&backgroundDemo:https://codepen.io/Chokcoco/pen/RwRzVeP[19]-webkit-mask-composite：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite[20]CodePenDemo--background&-webkit-mask-composite:https://codepen.io/Chokcoco/pen/rNMaKgW?editors=1100[21]CodePenDemo--CSSDoodle-CSSMASK背景：https://codepen.io/Chokcoco/pen/eYzwXRx[22]CodePenDemo--CSSDoodle-CSSMASK背景2：https://codepen.io/Chokcoco/pen/pobMgbX[23]CodePenDemo--CSSDoodle-CSSMASK背景3：https://codepen.io/Chokcoco/pen/WNGeaXb[24]Github--iCSS:https://github.com/chokcoco/iCSS
