复杂背景——网格

网格背景

当我们把多个渐变图案组合起来，透过彼此的透明区域显示时，会出现很神奇的效果。下图看起来像是一张方格纹图案的桌布，通过这个思路我们可以把半透明的垂直和水平条纹叠加起来，从而得到这种网格。

1.普通网格背景

首先，我们先绘制水平条纹

background-image: linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
            background-size: 60px 60px;

绘制垂直条纹

background-image: linear-gradient(to right,rgba(200,0,0,.5) 50%, transparent 0);
            background-size: 60px 60px;

将背景设置为白色，并将水平条纹和垂直条纹叠加，这样一个网格背景就大功告成了。

background: white;
            background-image: linear-gradient(rgba(200,0,0,.5) 50%, transparent 0),
                            linear-gradient(to right,rgba(200,0,0,.5) 50%, transparent 0);
            background-size: 60px 60px;

2.网格辅助线

在一些情况下，我们希望格子大小可以调整，但网格线的粗细保持不变，例如图纸辅助线的网格，原理与普通网格相同，只是将网格线修改为固定宽度。

 background: #58a;
            background-image: linear-gradient(white 1px, transparent 0),
                            linear-gradient(to right, white 1px, transparent 0);
            background-size: 60px 60px;

效果如图所示：

扩展
我们可以把不同线宽，不同颜色的网格图案叠加起来，得到不同效果的网格。像下面这样：

background: #58a;
            background-image: linear-gradient(white 1px, transparent 0),
                            linear-gradient(to right, white 1px, transparent 0),
                            linear-gradient(white 3px, transparent 0),
                            linear-gradient(to right, white 3px, transparent 0);
            background-size: 60px 60px, 60px 60px, 180px 180px, 180px 180px;

更多背景示例