image.png
知識(shí)點(diǎn)：
這里涉及的知識(shí)點(diǎn)其實(shí)很少妈嘹，只要需要你去理解具體含義其中包括
background: linear-gradient(),background-size,background-repeat沒錯(cuò)，只要你掌握了以上 3 點(diǎn)就能實(shí)現(xiàn)這種效果Ｉ芊痢Ｈ罅场！
下面會(huì)告訴大家如何具體實(shí)現(xiàn)此效果他去，其中虛線部分的繪制比較麻煩毙驯，但是也是可以實(shí)現(xiàn)，所以接下來會(huì)一一講解~~
實(shí)線網(wǎng)格繪制：
<!-- html部分 -->
<div class="grid-shi"></div>
.grid-shi{
height: 100vh;
background: linear-gradient(to right,#ccc 50px,transparent 50px);
}
這個(gè)你應(yīng)該看得懂灾测，稍微會(huì)點(diǎn)css都知道爆价，此時(shí)背景就是一個(gè)往右50px為灰色的背景圖片，因?yàn)橹蟮臑?code>transparent所以50px之后都是透明色媳搪，也就是啥都木得
image.png
.grid-shi{
height: 100vh;
background: linear-gradient(to right,#ccc 50px,transparent 50px);
background-repeat: no-repeat;/* 默認(rèn)為 repeat */
background-size: 100px 100px;
}
這里的background-size: 100px 100px;相當(dāng)于把背景放到一個(gè)100*100的容器里面铭段，因?yàn)?code>background-repeat默認(rèn)為 repeat ，所以我這里設(shè)置了 no-repeat方便理解蛾号，那如果不加又會(huì)是什么樣呢稠项？
image.png
background-repeat: repeat;
background-size: 100px 100px;
頁面就會(huì)變成很多個(gè)100*100的小模塊，而每個(gè)小模塊里面鲜结，都會(huì)有一個(gè)50px灰-透明的背景,當(dāng)然這是從左往右的設(shè)置展运，如果再加上一個(gè)從上往下的設(shè)置呢?
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;/* 默認(rèn)為 repeat */
background-size: 100px 100px;
}
這樣看起來不就實(shí)現(xiàn)了網(wǎng)格的樣子。
當(dāng)然精刷，現(xiàn)在還是有點(diǎn)粗的拗胜，那么你 背景設(shè)細(xì)一點(diǎn)，模塊分小一點(diǎn)
image.png
linear-gradient(to right,#ccc 1px,transparent 1px),
linear-gradient(to bottom,#ccc 1px,transparent 1px);
background-repeat: repeat;/* 默認(rèn)為 repeat */
background-size: 10px 10px;
這樣就實(shí)現(xiàn)了你最終要的效果了!!
image.png
虛線網(wǎng)格繪制：
<div class="grid-xu"></div>
知道了實(shí)線怎么繪制后怒允，你可能會(huì)想虛線怎么搞埂软。反正我也是琢磨了好久，雖然有些復(fù)雜，不過還是實(shí)現(xiàn)了勘畔。
這里我就大致講下原理所灸，具體理解，建議你還是直接到最下面看代碼吧!!
::before ::after的使用
這里我先設(shè)置一個(gè)背景色 紅色炫七，注意：是紅色
.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個(gè)疊加到一起，給個(gè)透明度万哪，就得到效果了侠驯。可能你還會(huì)不太明白，那么就動(dòng)起小手手奕巍，自己摸索摸索吧～～
這里的問題就是吟策，背景色必須要和你設(shè)置形成虛線起始色值一直，這里用的 white 來實(shí)現(xiàn)虛線的止，那么背景色就必須是白色ｉ菁帷！ 而且如果想實(shí)現(xiàn)疊加诅福，就一定別忘記設(shè)置透明度效床，不然只會(huì)被::after那層覆蓋掉～
image.png
點(diǎn)點(diǎn)背景:
這里把漸變修改為徑向漸變就實(shí)現(xiàn)點(diǎn)點(diǎn)背景了，原理和前面說的都是一樣的
background: radial-gradient(circle , #5a5a5a .5px, transparent .5px);
background-size: 10px 10px;
image.png
若想實(shí)現(xiàn)圖片和背景的融合权谁，可以直接通過
mix-blend-mode: difference; 去實(shí)現(xiàn)
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; /* 虛線網(wǎng)格大小 */
--gridSizeShi:60px; /* 虛線網(wǎng)格大小 */
--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;
}
/* 實(shí)線條部分 */
.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>網(wǎng)格背景</h1>
<p>The grid background</p>
</div>
</body>
</html>
其他方法：
body {
height: 100vh;
margin: 0;
background-image:
repeating-linear-gradient(0deg, #000 0 .5px, transparent .5px 20px),
repeating-linear-gradient(90deg, #000 0 .5px, transparent .5px 20px);
}
