CSS3 gradient介绍一文中介绍了用渐变画实线条纹背景，事实上用渐变配合background背景图层可以创造出各种奇妙的背景效果，例如参照css3patterns。本篇就举几个例子介绍一下它们实现的原理。
网格桌布 Blueprint grid
先画格子线：
.bluePrint{width:180px;height:120px;background-color:#269;background-image:linear-gradient(red1px,transparent0),linear-gradient(90deg,yellow1px,transparent0);background-size:20px20px;
}
background-image设置两个背景层，背景层里用linear-gradient画1px的实线(为了演示效果，先把横线设为红色，竖线设为黄色)。
如果眼神好会看到，元素顶边和底边是1px红色，左边和右边是1px的黄色，本着精益求精的精神，用background-position:-1px -1px;把它们去掉：
现在你可以再画一张不同线宽的背景图，无非就是上面代码的基础上改改线宽：
css3pattern3.png
background-image:linear-gradient(white2px,transparent0),linear-gradient(90deg,white2px,transparent0);background-size:100px100px;background-position:-2px-2px;
最后两张图合并起来就搞定了：
//完整代码.bluePrint{
width:180px;
height:120px;
background-color:#269;
background-image:linear-gradient(white2px,transparent0),
linear-gradient(90deg,white2px,transparent0),
linear-gradient(rgba(255,255,255,.3)1px,transparent0),
linear-gradient(90deg,rgba(255,255,255,.3)1px,transparent0);
background-size:100px100px,100px100px,20px20px,20px20px;
background-position:-2px-2px,-2px-2px,-1px-1px,-1px-1px;
}
CSS代码很简短，而且维护很容易。不比加载img或svg差多少。
国际象棋 checkerboard
有了上面的经验，再试试国际象棋桌布。所谓棋盘无非就是两种颜色的方块错开的图案。看似容易，其实用一层CSS渐变是很难实现的。诀窍是用两个直角三角形拼出一个正方形。先画左下角的三角形：
.checkerboard{width:180px;height:120px;background-color:#eee;background-image:linear-gradient(45deg,#bbb25%,transparent0);background-size:30px30px;
}
再画右上角的三角形：(为展示效果，先将颜色设成红色)
background-image:linear-gradient(45deg,transparent75%,red0);
两张背景叠起来：
background-image:linear-gradient(45deg,#bbb25%,transparent0),
linear-gradient(45deg,transparent75%,red0);
发现拼出来的效果不是正方形，原因是叠的位置不对。用background-position将第二层图片(红色三角)再往左下移动一半位置：
background-position:00,15px15px;
现在正方形出来了，怎么实现国际象棋那样错开呢？复制一个一样的图层，再如下蓝框所示，将新旧图层错开叠加：
复制出来的新图层，设置background-position往右下偏移一半距离，如蓝色框所示：
background-image:linear-gradient(45deg,#bbb25%,transparent0),
linear-gradient(45deg,transparent75%,red0),
linear-gradient(45deg,#bbb25%,transparent0),
linear-gradient(45deg,transparent75%,red0);
background-position:00,15px15px,15px15px,30px30px;
最终将红色改回正常色就搞定了：
//完整代码.checkerboard{
width:180px;
height:120px;
background-color:#eee;
background-image:linear-gradient(45deg,#bbb25%,transparent0),
linear-gradient(45deg,transparent75%,#bbb0),
linear-gradient(45deg,#bbb25%,transparent0),
linear-gradient(45deg,transparent75%,#bbb0);
background-position:00,15px15px,15px15px,30px30px;
background-size:30px30px;
}
当然上面的background-image还可以精简至两行，请自行参照css3patterns的源码。
波点 polka
明白了上面国际象棋的实现，那波点就更简单了，原理都是一样的，图层错峰叠加。圆点需要将线性渐变改成径向渐变，直接上源码：
.polka{width:180px;height:120px;background-color:#655;background-image:radial-gradient(tan15%,transparent0),radial-gradient(tan15%,transparent0);background-size:60px60px;background-position:00,30px30px;
}
斑马条纹 zebra
为了增加文字的可读性，有时候会遇到给文章加上斑马条纹背景的需求。这个需求其实不太好实现。因为文章通常都不在table里。我们可以用伪类:nth-child，:nth-of-type轻松给table实现斑马条纹，但显然不能在其他元素内部用伪类实现斑马条纹。
极端一点你可以给每一行文字都包进div里，然后间隔地对div添加背景色来实现斑马条纹。但显然不到万不得已，你一定不愿意尝试这个方法。更要命的是，用这个方法后，不能改变文字font-size，否则文字变大发生折行的话，背景图案就会使页面显得非常错乱。
看了上面的例子你可能也猜到了，我们将使用渐变来实现斑马条纹。用em设定背景尺寸，这样实现的斑马效果可以自适应font-size的任何变化：
pre{
padding:.5em;line-height:1.5;background:greenno-repeat;background-image:linear-gradient(pink50%,transparent0);background-size:auto3em;
}
弄成上图这样是为了调试方便，为了不让代码行顶天立地，所以设了padding。设line-height:1.5，background-size为其2倍为3em，这样能使一个线性渐变图层覆盖两行。背景设成no-repeat只是为了看清图层间的层叠关系。现在将no-repeat去掉，再把颜色调整一下：
效果已经很接近了，设line-height和background-size使一个线性渐变图层覆盖两行。但覆盖的效果没有实现居中，这是因为background-origin默认是padding-box，会加上0.5em的padding，因此将其改成context-box就行了：
pre{
padding:.5em;line-height:1.5;background:hsl(20,50%,95%);background-image:linear-gradient(rgba(120,0,0,.1)50%,transparent0);background-size:auto3em;
background-origin:content-box;
}
总结
像上面这些例子写成CSS代码，并不多，可以用预处理器Sass简化一下。传统的加载图片方式相比之下，多了一次HTTP请求，并无太大优势。
但css3patterns上一些比较复杂的背景图案(例如CSS源码体积超过500B的)，虽然用CSS实现很酷炫，但图层太多过于复杂，除了作者自己外，别人维护起来比较困难，可能SVG或加载图片更合适。例如这些背景：
正如本篇开头说的“事实上用渐变配合background背景图层可以创造出各种奇妙的背景效果”。我知道程序猿里有一条隐藏的鄙视链，比如做C++的看不起做Java的，Java的看不起JavaScript，JavaScript的看不起CSS(好吧，我承认说的就是以前的自己...作为一个C++程序猿，什么Python，Perl，JS，CSS好没技术含量...)。永远不要被各种心理因素，或条条框框限制住。Open mind，你会发现其实CSS真是潜力无穷。
感谢LEA VEROU提供的这些精美的背景图案，感谢CSS魔法译著了《CSS揭秘》这本书，前端工程师不容错过。
作者：张歆琳
链接：/p/82c5f2134c99
