运用css的线性渐变画网格背景图

先上效果图

body{
    background-color:#fff;
    background-image:
          linear-gradient(transparent,transparent 50%,rgba(55,110,176,0.3) 50%),
          linear-gradient(to right,transparent,transparent 50%,rgba(55,110,176,0.3) 50%);
    background-size:40px 40px;
    width:100%;
    height:100%;
  }

说明：
第一个liner-gradient是设置横向的线条的，我没有在整个元素上使用多个线性渐变，而是只使用了一个，然后通过背景相关属性控制其大小和重复，这样不仅能控制线条的多少，还不影响色标。
第二个同理设置，只是方向是从左向右设置，这样就形成了花格图案。

利用渐变可以绘制很多图案出来，推荐大家去看Lea Verou的CSS3 Patterns Gallary