CSS实现背景网格线（background-image）

效果图

参数

• 利用伪元素after来实现网格线图层
• background-image：设置线性渐变linear-gradient
• 第一个是实现横向的网格线，第二个是实现纵向网格线
• 参数一表示渐变线相较于水平线的角度，0deg表示渐变从下往上，90表示从左往右
• 接下来的四个参数表示在距离起始点多少px位置的中心线的颜色
• 0px或者可以设置0%的位置到1px或者设置其他百分比的位置都是黑色，接着从1px到终点都是透明色，这样可以画出一条1px的线
• background-size设置每一个网格的大小，默认重复平铺
• z-index：设置图层的层级，设置-1，让页面其他元素在他的上面

CSS代码块

body::after {
  position: fixed;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
      0deg,
      black 0px,
      black 1px,
      transparent 1px,
      transparent 100px
    ),
    linear-gradient(
      90deg,
      black 0px,
      black 1px,
      transparent 1px,
      transparent 100px
    );
  background-size: 50px 50px;
  opacity: 0.1;
  z-index: -1;
}