Logic (css)-background grid production (linear-gradient)

linear-gradient

Grammar: linear-gradient([direction], color-stop1, color-stop2, ...)
The first parameter is the (optional) direction parameter, which can be a degree or a location noun. The relationship between direction and reading is as follows:
insert image description here

angle	position	text description
0 days	to top	bottom up rendering
90 deg	to right	Render from left to right
180deg	to bottom	Render from top to bottom
270 deg	to left	Render right to left
The second parameter is color + start position

[1]
```
 linear-gradient(0deg, #000, transparent 1px)
```
Rendering starts from bottom to top;
the initial rendering color is black, and
the rendering starts at 1px position as transparent color to the final position
[2]
```
linear-gradient(0deg, #000, transparent 40%, red)
```
Render from bottom to top;
the initial rendering color is black;
the 40% position is rendered as a transparent color;
the final rendering color is red;

need

insert image description here
As shown in the figure above, I hope the text can be 以网格为背景displayed. Originally, I wanted to set the background image with the picture cut by the UI, but because the number of text is not fixed, the picture will be zoomed and the rendering effect is not as expected, so I use css to set the background-image: linear-gradientgrid background image.

accomplish

<div class="contain"></div>

.contain{
    
    
  position: relative;
  /* 宽度默认手机屏幕宽度，高度由内容撑开 */
  &::after{
    
    
    content:'';
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      0deg,
      #000,
      transparent 1px), // 上下 0-1px为黑色，1px至末尾为透明色 这样可以画出一个1px的黑线
      linear-gradient(
        90deg,
        #000,
        transparent 1px
      ); // 左右 同上下相同
    background-size: 12px 12px; // 12px一个画布(1个正方形)
    // 相当于图片长和宽都是12px，然后repeat填充整个元素
    opacity: 0.1; // 方格作为背景太明显了，因此加一个透明度(加在伪元素上不影响其他元素)
  }
  font-size: 13px;
}
</style>

insert image description here