css实现网格切片背景布局效果代码-html代码-BFW代码库

css实现网格切片背景布局效果代码

代码语言：html

代码描述：css实现网格切片背景布局效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <style>
        * {
          box-sizing: border-box;
        }
        
        :root {
          --gap: 8px;
        }
        
        body {
          margin: 0;
          font-family: system-ui;
        }
        
        .grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: var(--gap);
          padding: var(--gap);
          height: 100vh;
          position: relative;
          background: #080b11;
          display: -ms-grid;
          -ms-grid-columns: 1fr [4];
        }
        .grid div {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-end;
          padding: calc(var(--gap) * 1.5);
          min-height: 160px;
          color: #fff;
          font-size: 1.1rem;
          font-weight: 600;
          background-color: teal;
          background-image: url("//repo.bfw.wiki/bfwrepo/image/62902b3997a0f.png");
          background-attachment: fixed;
          background-size: cover;
          background-position: center;
          position: relative;
          cursor: pointer;
          overflow: hidden;
          trans.........完整代码请登录后点击上方下载按钮下载查看