CSS应用：复杂背景图案

通过线性渐变和通过径向渐变可以容易的构造出条纹背景（如果你还对线性渐变和径向渐变不了解，请参考我前面的文章线性渐变和径向渐变，你也可以在遇到困难的时候再去查阅），但他们能做的事情远不止于此，使用他们能够构造出一些非常复杂的背景图案。这里我将讲解使用他们来构造复杂背景图案的方法。
首先我们看一个例子，了解渐变能够做到什么。
background:linear-gradient(45deg, #92baac 23px, transparent 23px) 32px 32px,linear-gradient(45deg, #92baac 23px, transparent 23px,transparent 45px, #e1ebbd 45px, #e1ebbd 68px, transparent 68px),linear-gradient(-45deg, #92baac 11px, transparent 11px, transparent 34px,#92baac 34px,#92baac 56px,transparent 56px,transparent 79px,#92baac 79px);background-color:#e1ebbd;background-size: 64px 64px;如果你还未明白具体是怎么做到的，没有关系，这个例子只是想你展示使用渐变具体能做到什么,使用CSS可以构造出复杂的背景图案，但通常情况下也许你并不会想这么做，因为随着背景图案越来越复杂，CSS代码也会变得过于复杂而难于维护。在实际场景中，你往往会有多种选择（例如使用图片），但在这里，我们将弄清楚使用CSS的渐变怎么构造出复杂的背景图案，以及能够做到什么程度，然后在适当的时候使用它。

多重背景

我们已经知道CSS的background属性可以给元素设置背景，而使用CSS3，你可以为元素设置多个背景。background: background1, background 2, ..., backgroundN;
你提供的多重背景将重叠在一起，第一个背景将在最上面，最后一个背景在最下面，但仅有最后一个背景能包含颜色。也就是说，你指定的每一个背景可以使用background属性相关的所有属性，但只有最后一个背景可以使用background-color。
构造复杂背景图案就需要依赖多重背景，要想多个背景能够组合呈现，就需要灵活的使用透明（如果你还不清楚怎么设置透明色，请看径向渐变），下面我将具体介绍使用渐变构造复杂背景图案的方法。

网格背景

我们现在已经知道利用线性渐变怎么构造条纹背景，但利用多重背景，我们可以容易的构造出网格背景。
background-image:linear-gradient(90deg, transparent 20px, rgba(0,55,23,.5) 20px, rgba(0,55,23,.5)),linear-gradient(180deg, transparent 20px, rgba(0,55,23,.5) 20px, rgba(0,55,23,.5));background-color: #fff;background-size: 40px 40px;这样我们就得到了一个网格图案，你需要知道的关键点如下：
确定背景图案的最小重复单元，重复单元可大可小，视具体情况而。可能每个图层都有自己的重复单元。重复单元的大小即为background-size属性的值，我们将绘制好该单元，然后利用背景的重复机制使该重复单元布满整个背景；
确定好重复单元后，接下来就是确定图层。确定图层的目标首先是确定背景将由几个图层组成，以及图层之间的层叠关系。例如，上面的例子中就包含了两个图层，但这两个图像没有明确的层叠关系。图层的层叠关系有时非常重要，因为下面的图层会被上面的图层遮盖，如果你希望下面的图层显现出来，就需要将上面的图层的适当位置设置为透明或者使用透明色；
最后，你需要确定背景色。需要注意的是只有最下层的背景能够设置背景色，因此背景色肯定位于图层的最下方，背景色会在当其它所有图层都透明的地方显示。
了解了这些关键点，你就可以绘制出一些很漂亮的背景图案了。理论需要实践，看例子：
background-image:linear-gradient(transparent 39px, #fff 39px, #fff),linear-gradient(90deg, transparent 39px, #fff 39px, #fff);background-color: #6a9ac2;background-size: 40px 40px;这个例子就是充分利用了背景色，有时不同的图层也可以设置不同的重复单元大小，以此来实现更为复杂的背景，如下：
background-image:linear-gradient(#fff 3px, transparent 3px, transparent),linear-gradient(90deg, #fff 3px, transparent 3px, transparent),linear-gradient(#fff 1px, transparent 1px, transparent),linear-gradient(90deg, #fff 1px, transparent 1px, transparent);background-color: #6ac2be;background-size: 60px 60px, 60px 60px, 20px 20px, 20px 20px;上面的例子中使用了两种不同大小的重复单元，不同的重复单元在不同的图层上扩展，重叠在一起，得到最终的背景。

圆点背景

上面我们使用线性渐变构造出网格背景，下面则介绍怎么使用径向渐变构造圆点背景，原理也和构造网格背景的原理类似，看例子：
background-image:radial-gradient(tan 25%, transparent 0);background-color: #687180;background-size: 44px 44px;通过将不同图层进行适当的移位，可以创造出更加复杂的图案：
background-image:radial-gradient(tan 20%, transparent 0),radial-gradient(tan 20%, transparent 0);background-color: #687180;background-size: 66px 66px;background-position: 0 0, 33px 33px;这里，使用了两个一样的图层，但通过background-position属性将第二个图层的显示位置和第一个图层错开了，达到了更复杂的背景效果。
到这里，你基本上已经掌握了制作复杂背景图案的基本技巧，而剩下的就是如何灵活的应用它们呢，是时候回到最初我们演示的例子上去了。

箭头背景

首先，我们需要确定整个背景的重复单元。根据对整个背景图案的分析，我得到了一个基本的重复单元如下：
通过不断的重复这个单元，就可以整个背景图案。接下来，就需要为这个基本的重复单元划分图层，图层的每一层都应该是你通过渐变一次能得到的图案。在这里，我将其划分为3个图层，如下：
ABC根据每个图层的作用，我们将A放在最上面，B其次，C在最下面。下面是每个图层的作用：
Alinear-gradient(45deg, #92baac 23px, transparent 23px) 32px 32pxA图层指定了背景绘制的位置，主要功能是绘制右上的三角形，由于A在最上面，因此不用担心其它图层会遮挡A，并且除了A绘制的三角形，其它部位该图层都是透明，将呈现下面图层的内容。Blinear-gradient(45deg, #92baac 23px, transparent 23px,transparent 45px, #e1ebbd 45px, #e1ebbd 68px, transparent 68px)B图层将整个对角线划分为4个部分，第一个部分绘制左下的三角形；第二部分透明；第三部分设置了颜色#e1ebbd，这里设置颜色的目的是为了遮挡下面的图层，因此应该设置为和背景色相同的颜色，由于B在A的下面，因此A图层会正常呈现；第四部分透明。Clinear-gradient(-45deg, #92baac 11px, transparent 11px, transparent 34px,#92baac 34px,#92baac 56px,transparent 56px,transparent 79px,#92baac 79px)C图层较为复杂，方式也和B图层类似，只是C图层不会完全呈现出来，它的部分图形会被A和B遮挡住，最终呈现出来的部分和A、B一起呈现出完整的图形。确定好A、B和C图层后，最终和背景色结合就成为了最终的图形。

总结

网页中的图形有很多实现的方式，这里讲述了怎么使用CSS来绘制图形，使用CSS绘制图形非常方便，但复杂的图形也可能导致代码过于复杂而难于理解，在实际的项目中可以根据需要来使用。
如果你对CSS绘图感兴趣，可以关注我后面的“用CSS绘图”系列。