通过线性渐变和通过径向渐变可以容易的构造出条纹背景(如果你还对线性渐变和径向渐变不了解,请参考我前面的文章线性渐变和径向渐变,你也可以在遇到困难的时候再去查阅),但他们能做的事情远不止于此,使用他们能够构造出一些非常复杂的背景图案。这里我将讲解使用他们来构造复杂背景图案的方法。
首先我们看一个例子,了解渐变能够做到什么。
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属性可以给元素设置背景