[CSS揭秘]复杂的背景图案
这一篇是接着上一篇[CSS揭秘]条纹背景来继续讲解CSS渐变的强大之处
背景知识
linear-gradient
radial-gradient
repeating-linear-gradient
repeating-radial-gradient
使用CSS渐变创建任何种类的几何图案几乎都是可能的。但是本篇只讲如果创建网格、波点、棋盘这三种类型的几何图案。
网格
将水平渐变与垂直渐变的条纹进行叠加，让彼此都透过对方的透明区域进行显示，这时候就会得到各种样式的网格。
background: #f6f7f8;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0), linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;
如果希望网格中每个格子的大小可以调整，而网格线条的粗细可以保持固定，那么可以使用长度值作为色标的位置值。
background: #58a;
background-image: linear-gradient(#fff 1px, transparent 0), linear-gradient(90deg, #fff 1px, transparent 0);
background-size: 30px 30px;
甚至可以将两种不同线宽不同颜色的网格图案叠加起来得到一个更加逼真的网格
background: #58a;
background-image: linear-gradient(#fff 1px, transparent 0), linear-gradient(90deg, #fff 1px, transparent 0), linear-gradient(#fff 3px, transparent 0), linear-gradient(90deg, #fff 3px, transparent 0);
background-size: 25px 25px, 25px 25px, 75px 75px, 75px 75px;
波点
使用径向渐变能够创建的最简单图案就是圆点的阵列
background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 20px 20px;
通过两层圆点阵列图案的错位排列可以实现真正的波点图案，第二个背景图片的偏移量正好等于贴片宽高的一半
background: #655;
background-image: radial-gradient(tan 30%, transparent 0),
radial-gradient(tan 30%, transparent 0);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
棋盘
棋盘图案是可以通过平铺生成的，平铺成这个图案的典型贴片包含两种不同颜色的方块，且相互间隔。
实现技巧在于用两个直角三角形来拼合出一个方块。
创建直角三角形渐变
background: #eee;
background-image: linear-gradient(45deg, #bbb 50%, transparent 0);
background-size: 20px 20px;
再创建一个反方向的直角三角形渐变
background: #eee;
background-image: linear-gradient(45deg, transparent 75%, #bbb 0);
background-size: 20px 20px;
将这两层渐变通过水平方向和垂直方向的移动拼合在一起就能构成一个完整的方块
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0)
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
最后将这组渐变重复一份再进行移动则能形成棋盘图案
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0),
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 10px 10px, 10px 10px, 0 0;
background-size: 20px 20px;
将之前两层三角形渐变图案拼合在一起之后会发现只需要将这个渐变组合进行平移就能实现棋盘图案，同时也可以简化代码
background: #eee;
background-image: linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0),
linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
提供一个小技巧：
如果需要将一行CSS代码打断为多行代码，只需要使用反斜杠 \ 来转义每行末尾的换行就可以啦。
棋盘图案如果使用SVG实现会更简单
background: #eee url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<rect x="50" width="50" height="50" />
<rect y="50" width="50" height="50" />
</svg> ');
background=size: 20px 20px;
最后将这些图案技巧与混合模式blending mode结合起来。当我们对图案的某些图层使用background-blend-mode属性设置一个非normal值时，可以产生非常有趣的图案。参考地址: http://bennettfeely.com/gradients
