css draw grid background

Article directory

Preface

This article mainly briefly and concisely implements the css grid background and further explores its application principles.

renderings

Insert image description here
css code

body::before, body::after {
    
    
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            content: '';
            background-repeat: repeat;
            pointer-events: none;
            opacity: 0.5;
            /* background-color: red; */
        }

        body::before {
    
    
            background-image: linear-gradient(to right,
                    black 1px,
                    transparent 1px,
                    transparent 10px),
                linear-gradient(to bottom,
                    black 1px,
                    transparent 1px,
                    transparent 10px);
            background-size: 10px 10px;
        }

        body::after {
    
    
            background-image: linear-gradient(to right,
                    black 1px,
                    transparent 1px,
                    transparent 100px),
                linear-gradient(to bottom,
                    black 1px,
                    transparent 1px,
                    transparent 100px);
            background-size: 100px 100px;
        }

illustrate

The grid background is implemented using the background-image attribute .

background-image 属性设置一个元素的背景图像。
元素的背景是元素的总大小，包括填充和边界（但不包括边距）。
默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。
提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，可以使用背景色带代替。

Take a look at its properties

name	illustrate
url(‘URL’)	Image URL
none	No image background will be displayed. This is the default
linear-gradient()	Create an "image" with a radial gradient. (center to edges)
repeating-linear-gradient()	Creates a repeating linear gradient "image".
repeating-radial-gradient()	Create a repeating radial gradient "image"
you inherit	Specifies that the background image should be inherited from the parent element

What is used is linear-gradient()

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
例子：
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
这里说明下，to right就是往右进行渐变，to bottom就是往下进行渐变，当然，你也可以自己设置渐变角度 xdeg

Insert image description here
Specific example:
1 Black-red gradient from left to right

 div{
    
    
            position: absolute;
            left:50px;
            top:50px;
            width: 200px;
            height: 80px;
            border:solid 1px red;
            background-image: linear-gradient(to right,rgba(2,2,2,1),rgb(209, 21, 21));
        }

Insert image description here
2 0 angle black, red, green gradient

 div{
    
    
            position: absolute;
            left:50px;
            top:50px;
            width: 200px;
            height: 80px;
            border:solid 1px red;
            background-image: linear-gradient(0deg,rgba(2,2,2,1),rgb(209, 21, 21),rgb(74, 209, 21));
        }

Insert image description here
So let's think about how to draw the grid.
The grid is divided into left and right and up and down. To put it bluntly, gradient lines are stacked lines of different color gamuts.
Let's first draw the horizontal gradient line.
1 The horizontal gradient is composed of horizontal lines from top to bottom, that is to bottom, or 0deg

div{
    
    
            position: absolute;
            left:50px;
            top:50px;
            width: 200px;
            height: 80px;
            border:solid 1px red;
            background-image: linear-gradient(to bottom,transparent 9px,black 1px) ;
            background-size: 100% 10px;
            background-repeat: repeat;
        }

Insert image description here
In the same way, draw vertical lines

div{
    
    
            position: absolute;
            left:50px;
            top:50px;
            width: 200px;
            height: 80px;
            border:solid 1px red;
            /* background-image: linear-gradient(to bottom,transparent 9px,black 1px) ;
            background-size: 100% 10px;
            background-repeat: repeat; */
            background-image: linear-gradient(to right,transparent 9px,black 1px) ;
            background-size: 10px 100%;
            background-repeat: repeat;
        }

Insert image description here
Put the two together:

div{
    
    
            position: absolute;
            left:50px;
            top:50px;
            width: 200px;
            height: 80px;
            border:solid 1px red;
            background-image: linear-gradient(to bottom,transparent 9px,black 1px),linear-gradient(to right,transparent 9px,black 1px) ;
            background-size: 10px 10px;
            background-repeat: repeat;
        }

Insert image description here
At this point, it has basically been deduced.