CSS+HTML<网格背景效果>

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>

其他方法:

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

推荐阅读更多精彩内容

  • 目录 Day01标签行元素 Day02表单元素css选择器伪类选择符行内元素块元素表格 Day03文本相关属性列表...
    Moquyun阅读 227评论 0 0
  • 本文章主要整理了html入门的基础知识点 图片 <img> img { border-radiuds: 3px; ...
    壞忎阅读 70评论 0 2
  • # CSS样式规则overflow 使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进...
    低调迷人的反派角色阅读 274评论 0 1
  • 话题背景:如今网页展示的姿势是这样的 图片来自:设计之家 炫酷的网页展示,支撑它的正是强大的CSS3,还有什么理由...
    Alleyines阅读 1,530评论 0 2
  • 只是总结了一些平时容易忘记的知识点,太基础的没摘录,望大家不喜就喷。 0.HTML和CSS 1.标签子元素 .ul...
    小菜小半碟阅读 118评论 0 1