CSS3：グリッド背景を作る

サンプルはこちら。
http://codepen.io/KazuyoshiGoto/pen/Gywcd

CSS3のlinear-gradientの応用で背景をグリッド状にすることが可能です。
IEも10以降(?)であれば対応しています。

CSS

最初のbg1

.bg1 {
  background-image:
    linear-gradient(
      transparent,
      rgba(0, 0, 0, 1)
    );
  background-size: 20px 20px;
  background-repeat: repeat;
}

肝要のbackground-imageは分かりやすいようプロパティ内改行を入れています。

linear-gradientで透明から黒を変化するグラデーションを設定しており、background-sizeを指定することで背景を20×20のサイズでタイル状にしてリピートさせています。

bg1に手を加えたbg2

.bg2 {
  background-image:
    linear-gradient(
      transparent 95%,
      rgba(0, 0, 0, 1) 5%
    );
}
//※background-imageのみ抜粋

 bg1の内容とほぼ変わらないのですが、グラデーション内の色を透明95%、黒5%で位置を指定しています。
グラデーションの仕様上px値で指定できないのですが、こうすることで黒が限りなく細くなり、サンプル通り線が連続して引かれているように見えます。

bg2に手を加えたbg3

.bg3 {
  background-image:
    linear-gradient(
      transparent 95%,
      rgba(0, 0, 0, 1) 5%
    ),
    linear-gradient(
      90deg,
      transparent 95%,
      rgba(0, 0, 0, 1) 5%
    );
}
//※background-imageのみ抜粋

CSS3では背景イメージを複数設定できます。その要領でlinear-gradientを複数追加しています。

bg2で設定した背景と同じものをもう一つ追加し、角度の 90deg を追加しています。こうすることでグラデーションの向きを変え、グリッド状の背景を作っています。