image.png
知识点：
这里涉及的知识点其实很少，只要需要你去理解具体含义
其中包括
background: linear-gradient(),background-size,background-repeat
没错，只要你掌握了以上 3 点就能实现这种效果！！！
下面会告诉大家如何具体实现此效果，其中虚线部分的绘制比较麻烦，但是也是可以实现，所以接下来会一一讲解~~
实线网格绘制：
.grid-shi{
height: 100vh;
background: linear-gradient(to right,#ccc 50px,transparent 50px);
}
这个你应该看得懂，稍微会点css都知道，此时背景就是一个往右50px为灰色的背景图片，因为之后的为transparent所以50px之后都是透明色，也就是啥都木得
image.png
.grid-shi{
height: 100vh;
background: linear-gradient(to right,#ccc 50px,transparent 50px);
background-repeat: no-repeat;/* 默认为 repeat */
background-size: 100px 100px;
}
这里的background-size: 100px 100px;相当于把背景放到一个100*100的容器里面，因为background-repeat默认为 repeat ，所以我这里设置了 no-repeat方便理解，那如果不加又会是什么样呢？
image.png
background-repeat: repeat;
background-size: 100px 100px;
页面就会变成很多个100*100的小模块，而每个小模块里面，都会有一个50px灰-透明的背景,当然这是从左往右的设置，如果再加上一个从上往下的设置呢?
image.png
.grid-shi{
height: 100vh;
background:
linear-gradient(to right,#ccc 50px,transparent 50px),
linear-gradient(to bottom,#ccc 50px,transparent 50px);
background-repeat: repeat;/* 默认为 repeat */
background-size: 100px 100px;
}
这样看起来不就实现了网格的样子。
当然，现在还是有点粗的，那么你 背景设细一点，模块分小一点
image.png
linear-gradient(to right,#ccc 1px,transparent 1px),
linear-gradient(to bottom,#ccc 1px,transparent 1px);
background-repeat: repeat;/* 默认为 repeat */
background-size: 10px 10px;
这样就实现了你最终要的效果了!!
image.png
虚线网格绘制：
知道了实线怎么绘制后，你可能会想虚线怎么搞。反正我也是琢磨了好久，虽然有些复杂，不过还是实现了。
这里我就大致讲下原理，具体理解，建议你还是直接到最下面看代码吧!!
::before ::after的使用
这里我先设置一个背景色 红色，注意：是红色
.grid-xu::before{
background: linear-gradient(to right,white 25px,transparent 25px),
linear-gradient(to bottom,blue 25px,transparent 25px);
background-size: 50px 200px;
}
.grid-xu::after{
background: linear-gradient(to bottom,white 25px,transparent 25px),
linear-gradient(to right,blue 25px,transparent 25px);
background-size: 200px 50px;
}
左::before,右::after
image.png
接下来把
红色背景色改成和white一样的白色,不就成了虚线的模样了，然后接下来需要的是把他们2个叠加到一起，给个透明度，就得到效果了。
可能你还会不太明白，那么就动起小手手，自己摸索摸索吧～～
这里的问题就是，背景色必须要和你设置形成虚线起始色值一直，这里用的 white 来实现虚线，那么背景色就必须是白色！！ 而且如果想实现叠加，就一定别忘记设置透明度，不然只会被::after那层覆盖掉～
image.png
点点背景:
这里把渐变修改为径向渐变就实现点点背景了，原理和前面说的都是一样的
background: radial-gradient(circle , #5a5a5a .5px, transparent .5px);
background-size: 10px 10px;
image.png
若想实现图片和背景的融合，可以直接通过
mix-blend-mode: difference; 去实现
image.png
代码如下：
Document
网格背景
The grid background
其他方法：
body {
height: 100vh;
margin: 0;
background-image:
repeating-linear-gradient(0deg, #000 0 .5px, transparent .5px 20px),
repeating-linear-gradient(90deg, #000 0 .5px, transparent .5px 20px);
}