0

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

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

这是一个小提琴：

Notice in the fiddle, my particles arent in the background

JS小提琴

4

2 回答 2

1

您需要将段落标签移到粒子之外。所以你的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/

于 2018-09-14T21:29:43.707 回答
0

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

  • 您不应该将所有内容都包含在粒子 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>

于 2018-09-14T21:20:00.117 回答