在CSS网格布局上遇到一些麻烦。我在课堂上使用了网格简介，它将我的粒子和引言段分成两部分。
我想要的是粒子覆盖整个100vh的背景
这是一个小提琴：
Notice in the fiddle, my particles arent in the background
您需要将段落标记移动到粒子之外。所以你的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%;
}
我记得有类似颗粒的问题。如果你想让粒子成为你的整个背景，这是我的解决方案：
.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>