javascript - 内容在 DIV 中无法正确显示

Question

我的一些内容似乎被推送到我正在使用的名为 ParticleGround 的 jQuery 插件下方，可在此处找到:ParticleGround GitHub

我这里有这段代码:

<script type="text/javascript">
    window.onload = function(){
        $('#Home').particleground({
            dotColor: '#95a5a6',
            lineColor: '#95a5a6'
        });
        }
</script>

    <div class="Home" id="Home">
        <div class="text-vcenter">
            <p class="home">Test</p>
            <p style="color:white; font-family:BebasNeueLight; font-size: 2em;">Cool stuff here</p>
            <p style="color:white;">Info</p>
            <p style="color:white;">Texas, USA</p>
            <br />
            <a class="btn btn-info outline smoothScroll" href="#Services">More Info</a>
        </div>
    </div>

当然，我所有的插件都已正确初始化，所以这不是问题。

如您在上面的代码中所见，我将背景作为 #Home id，它在 particleground 脚本 中初始化以使用效果。现在，当我更改这行代码时，这一切都开始发生了:

<div class="centered">

为了...

<div class="text-vcenter">

这是 CSS:

#Home:

#Home {
  background: #16a085 no-repeat center center fixed;
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-right: 25px;
  padding-left: 25px;
}

.centered:

.centered {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  text-align: center;
}

.text-vcenter:

.text-vcenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

关于如何解决我的内容被推到粒子地面之下的任何想法？我确信这很容易修复，但我一无所获，对我来说已经是深夜了。

更新:

它似乎只是将它向下推到 particleground 的 100% View 下方并将其移到右侧，它应该位于 particleground div 顶部的中心。

Answer 1

好吧， Canvas 上有一个 display: block，所以它会将内容向下推。您可以将 Canvas 设置为绝对定位:

canvas{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

这样它将是 #Home div 的 100% 宽度和高度，但由于它是绝对定位的，所以它会在背景中。

这是 fiddle :http://jsfiddle.net/4h0ghb67/