fondo de cuadrícula de dibujo css

Prefacio

Este artículo implementa principalmente de manera breve y concisa el fondo de la cuadrícula CSS y explora más a fondo sus principios de aplicación.

representaciones

codigo css

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;
        }

ilustrar

El fondo de la cuadrícula se implementa utilizando el atributo de imagen de fondo.

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

Échale un vistazo a sus propiedades

nombre	ilustrar
URL('URL')	URL de la imagen
ninguno	No se mostrará ninguna imagen de fondo. Este es el valor predeterminado
gradiente lineal()	Crea una "imagen" con un degradado radial. (centro a bordes)
gradiente-lineal-repetitivo()	Crea una "imagen" de degradado lineal repetitivo.
gradiente-radial-repetitivo()	Cree una "imagen" de degradado radial repetida
tu heredas	Especifica que la imagen de fondo debe heredarse del elemento principal.

Lo que se utiliza es gradiente lineal()

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

Ejemplo específico:
1 degradado negro-rojo de izquierda a derecha

 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));
        }

2 0 ángulo negro, rojo, verde degradado

 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));
        }

Entonces pensemos en cómo dibujar la cuadrícula.
La cuadrícula se divide en izquierda y derecha y arriba y abajo. Para decirlo sin rodeos, las líneas de degradado son líneas apiladas de diferentes gamas de colores.
Primero dibujemos la línea de gradiente horizontal.
1 El degradado horizontal se compone de líneas horizontales de arriba a abajo, es decir, hacia abajo, o 0 grados.

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;
        }

De la misma forma, dibuja líneas verticales.

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;
        }

Junte los dos:

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;
        }

En este punto, básicamente se ha deducido.