CSS+HTML<网格背景效果>
2021-01-21 本文已影响0人
誰在花里胡哨
image.png
知识点：
这里涉及的知识点其实很少，只要需要你去理解具体含义其中包括
background: linear-gradient(),background-size,background-repeat没错，只要你掌握了以上 3 点就能实现这种效果！！！
下面会告诉大家如何具体实现此效果，其中虚线部分的绘制比较麻烦，但是也是可以实现，所以接下来会一一讲解~~
实线网格绘制：
<!-- html部分 -->
<div class="grid-shi"></div>
.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
虚线网格绘制：
<div class="grid-xu"></div>
知道了实线怎么绘制后，你可能会想虚线怎么搞。反正我也是琢磨了好久，虽然有些复杂，不过还是实现了。
这里我就大致讲下原理，具体理解，建议你还是直接到最下面看代码吧!!
::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
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root{
--gridSizeXu:20px; /* 虚线网格大小 */
--gridSizeShi:60px; /* 虚线网格大小 */
--gridColor:#5f5f5f; /* 线条颜色 */
}
body{
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* 虚线部分 */
.grid-xu{
overflow: hidden;
width: 100%;
height: 100%;
position: fixed;
z-index: -2;
transform: scale(1.1);
}
.grid-xu::before, .grid-xu::after{
opacity: .5;
content: '';
background-repeat: repeat;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.grid-xu::before{
/* 从左往右 */
background: linear-gradient(to right,white 1px,transparent 1px),
linear-gradient(to bottom,var(--gridColor) .5px,transparent .5px);
background-size: 3px var(--gridSizeXu);
}
.grid-xu::after{
/* 从上往下 */
background:
linear-gradient(to bottom,white 1px,transparent 1px),
linear-gradient(to right,var(--gridColor) .5px,transparent .5px);
background-size: var(--gridSizeXu) 3px;
}
/* 实线条部分 */
.grid-shi{
overflow: hidden;
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
transform: scale(1.1);
background: linear-gradient(to right,var(--gridColor) .5px,transparent .5px),
linear-gradient(to bottom,var(--gridColor) .5px,transparent .5px);
background-size: var(--gridSizeShi) var(--gridSizeShi);
background-repeat: repeat;
}
.content{
text-align: center;
}
.content h1{
font-weight: 300;
letter-spacing: .7rem;
margin: 0;
}
.content p{
font-size: 14px;
font-weight: 200;
text-transform: uppercase;
letter-spacing: .1rem;
text-decoration: line-through;
color: #5a5a5a;
}
</style>
</head>
<body>
<div class="grid-xu"></div>
<div class="grid-shi"></div>
<div class="content">
<h1>网格背景</h1>
<p>The grid background</p>
</div>
</body>
</html>
