资源描述：
《复杂背景图案》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、复杂背景图案原⽂出处：http://www.w3cplus.com/css3/css-secrets/complex-background-pattern.html问题在上⼀节中，我们学习了如何使⽤CSS渐变创建各种类型的条纹。不过，条纹并不能代表所有的背景图案，最多只能算是背景中的⼏何图案。此外，我们还会常常⽤到许多类型的背景，⽐如⽹格、波尔卡圆点、棋盘格等等。值得庆幸的是，CSS的渐变属性就可以帮我们创建这些背景图案。虽然⼏乎可以使⽤CSS的渐变创建各种类型的⼏何图案，但是这些背景图案的效果并不具有实⽤性。如果开发中稍不注意，那么代码就会迅速变得冗杂和繁琐。C
2、SS的背景图案也是⾮常适合使⽤CSS预处理器来处理的问题之⼀，⽐如可以使⽤Sass来减少重复背景图案中的重复⼯作。在2011年的时候，我的CSS3图案集就展⽰了⼤量的CSS渐变图案。之后在2011年和2012年期间，有⼤量和CSS渐变相关的⽂章、书籍和会议引⽤了它们，甚⾄会被浏览器⼚商拿来调整浏览器在渐变⽅⾯的功能。不过，并不是每⼀个模式都是可以⽤于线上产品的，有⼀些只是⽤来演⽰CSS渐变的能⼒，但是具体的代码往往过于冗杂。对于这些情况，SVG显然是个更好的选择。如果你想了解更多的SVG信息，可以查看SVGPatterns，该⽹站展⽰了⼤量SVG版本的CSS图案集
3、。在本章中，我们将会着重创建简单且实⽤的图案。⽹格当我们只能使⽤⼀次渐变时，往往就限制了背景图案的种类。下⾯将要展⽰给各位的魔幻效果就是要组合多个渐变，让它们交叉重叠。最简单的图案就是使⽤交叉重叠的⽔平和垂直条纹创建各种类型的⽹格。⽐如，下⾯的代码就是⽤来创建怀旧风格的桌布图案：background:white;background-image:linear-gradient(90deg,rgba(200,0,0,.5)50%,transparent0),linear-gradient(rgba(200,0,0,.5)50%,transparent0);backg
4、round-size:30px30px;在某些情况下，我们会想要调整⽹格中单元格内部的尺⼨，⽽又不影响单元格整体的⼤⼩。这也是⼀种很好地情境，让我们使⽤固定长度代替百分⽐来设置过渡点的位置：background:#58a;background-image:linear-gradient(white1px,transparent0),linear-gradient(90deg,white1px,transparent0);background-size:30px30px;效果如图所⽰上图是⼀个具有1px⽩线的⽹格，⽹格中的每个单元格保持了30px的⼤⼩。就像在上⼀节
5、的“灵活可扩展的精致斜纹”部分所说，最初设定的背景⾊也是⼀种降级处理的技巧。总体来看，这个⽹格图案是⾼可维护性代码（虽然其中仍然有⼀些重复代码）的典范：当需求变更时，可以迅速定位到需要更改的⽹格尺⼨、宽度和颜⾊需改样式时⽆需过多编辑，只需⼀两处修改即可实现短⼩简洁，只需要四⾏代码，⼤约170b的代码量，如果使⽤SVG的话是远远⽆法如此精简的将CSS图案的⽂件黏贴到bytesizematters.com这个⽹站，就可以计算出⽂件⼤⼩我们甚⾄可以交叉多层不同宽度和颜⾊的⽹格来创建⼀个更真实的⽹格（类似蓝图图纸，如下图）：background:#58a;backgrou
6、nd-image:linear-gradient(white2px,transparent0),linear-gradient(90deg,white2px,transparent0),linear-gradient(hsla(0,0%,100%,.3)1px,transparent0),linear-gradient(90deg,hsla(0,0%,100%,.3)1px,transparent0);background-size:75px75px,75px75px,15px15px,15px15px;波尔卡圆点到⽬前为⽌，我们只是使⽤了线性渐变来创建背景图案。
7、在此之外，径向渐变通常⾮常有⽤，它可以帮助我们创建圆形、椭圆形，或者是这些图形的部分。使⽤径向渐变创建的最简单图案就是⼤量的圆点，如下图：background:#655;background-image:radial-gradient(tan30%,transparent0);background-size:30px30px;诚如所见，这种图案往往⽤处不⼤。不过，接下来我们可以使⽤两个径向渐变的组合，通过设定不同的background-size来创建类似波尔卡圆点的图案：background:#655;background-image:radial-gradien
8、t(tan
