css绘制网格背景

文章目录

- - 前言
  - 效果图
  - 说明

前言

本篇文章主要简单扼要的去实现css网格背景，并进一步探求其应用原理

效果图

在这里插入图片描述
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;}

说明

实现网格背景利用的是background-image属性

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

看一下它的属性

名称	说明
url(‘URL’)	图像的URL
none	无图像背景会显示。这是默认
linear-gradient()	用径向渐变创建 “图像”。 (center to edges)
repeating-linear-gradient()	创建重复的线性渐变 “图像”。
repeating-radial-gradient()	创建重复的径向渐变 “图像”
inherit	指定背景图像应该从父元素继承

其中用到的就是 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

在这里插入图片描述
具体例子：
1 从左往右的黑红渐变

 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角度的黑、红、绿渐变

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

在这里插入图片描述
那么我们思考下，如何绘制网格。
网格分为左右和上下。渐变线说白了就是一条条不同色域的线堆叠而成。
我们先来绘制横向的渐变线。
1 横向渐变是从上到下的横线条组成的，就是to bottom，或者是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;}

在这里插入图片描述
同样的道理，画竖着的线

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

在这里插入图片描述
两个合到一起：

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