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 script中初始化以使用效果。现在，当我改变这行代码时，这一切都开始了：

<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;
}

关于如何修复我的内容的任何想法被推到了粒子场下面？我确定这是一个简单的解决办法，但我是空白的，对我来说已经是深夜了。

更新

它似乎实际上只是将其向下推到了粒子场的100％视图之下并将其移到右侧，它应该位于粒子场div顶部的中心。

Answer 1

好吧，画布上有一个display: block，所以它推动了内容。您可以将画布设置为绝对定位：

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

这样它将是#Home div的100％宽度和高度，但由于它绝对定位，它将在后台。

这里是小提琴：http://jsfiddle.net/4h0ghb67/

内容无法在DIV内正确显示

1 个答案: