复杂的背景图案

网格

当我们把多个渐变图案组合起来，让它们透过彼此的透明区域显现时，可以得到各种各样的网格

在某些情况下，我们希望 网格中每个格子的大小可以调整，而网格线条的粗细同时保持固定

以下是一个 使用长度而不是百分比 作为色标的例子：

在开发 segmentfault 广告模块 的时候，我就用到了这个技巧（背景部分，忽略红色部分）

波点

我们可以生成两层圆点阵列图案，并把它们的背景定位错开，从而导得到真正的波点图案。请注意，为了达到效果，第二层背景的偏移定位值必须是贴片宽高的一半

棋盘

这里的窍门在于 用两个直角三角形来拼合出我们想要的方块

一个直角三角形：

我们把这些直角三角形的直角边缩短到原来的一半

我们把色标的顺序反转，将两者组合

然后把第二层渐变在水平和垂直方向均移动贴片长度的一半，就可以拼成一个完整的方块

这本质上只是 棋盘的一半，我们只需要把现有的这一组渐变重复一份，从而创建出另一组正方形

代码还可以优化，将以上 background-image 中 1、4 划为一组，2、3 划为一组，把四层渐变简化成两层渐变，我们还可以把深灰色改成半透明的黑色 —— 这样我们只需要修改底色就可以改变整个棋盘的色调，不需要单独调整各层渐变的色标了

但是显示貌似有个问题，有莫名的黑色斜线（如下图）

其实，svg 是更好的选择

对于现代浏览器，svg 文件可以以 data URI 的形式嵌入到样式表中，甚至不需要用 base64 或 URLencode 来对其编码，这样跟 CSS 渐变一样也能省掉 HTTP 请求（普通的 svg 文件会增加 http 请求）