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属性可以给元素设置背景