CSS 网格将主页分成两部分

Question

CSS 网格布局有些问题。我在我的 class 介绍中使用了网格，它将我的粒子和介绍段落分成两部分。

我想要的是让粒子覆盖整个背景的 100vh

这是一个fiddle：

Notice in the fiddle, my particles arent in the background

JS Fiddle

Answer 1

我记得我有过类似的粒子问题。如果你想让粒子成为你的整个背景，这是我的解决方案：

你不应该将所有内容包裹在粒子 div 中，粒子 div 应该被关闭
在粒子应该 div 包裹所有内容之后，它应该有一个相对位置和一个比粒子更大的 z-index。粒子的位置应该是固定的。基本上，您的 html 结构应该如下所示：

.overlay {
   z-index: 100;
   position: relative;
}
#particles-js {
    position: fixed;
    height: 100%;
    width: 100vw;
    z-index: 0;
    display:grid;
    height:100vh;
    background-color:#030711e8;
}

<body>
    <div id="particles-js"></div>
    <div class="overlay">
        <p>  your introduction  </p>
        <main>  your content  </main>
    </div>  
</body>

Answer 2

您需要将段落标记移到粒子之外。所以你的 html 会像

  <div class="headerdata">      
        <p id="Introduction" class="css-typing">
            Hi, I'm <strong>Billy Bob</strong>.
        <br/><br/>
            I'm a <strong>front-end</strong> and <strong>back-end</strong> developer.
        </p>
  </div>
    <header id="particles-js">
    </header>

你的CSS会像

.headerdata {
    height:100vh;
    background-color:#030711e8;
    position: absolute;
    padding-top: 60px;
    width:100%;
}
header{
  position:absolute; width: 100%; 
  height: 100%;  
  background-repeat: no-repeat; 
  background-size: cover; 
  background-position: 50% 50%; 
}

https://jsfiddle.net/nimittshah/gLq56ptv/

CSS 网格将主页分成两部分

CSS Grid splitting homepage into two parts

css

css-grid

particles.js