javascript - 在正确的图层上获取particles.js？

我不能使particles.js作为背景。它涵盖了整个页面，我尝试为要覆盖的所有粒子设置更高的z-index（50）。这是particles codepen。码笔没有背景，因此看不到颗粒。

下面的代码是我试图设置为<section id="services">的背景的代码。

<!-- particles.js container -->
<div id="particles-js"></div>
<!-- stats - count particles -->
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib --> <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>

问题在于它也涵盖了<section>内部的所有内容，不确定原因。

您将要看到的代码不过是一个破烂的“ bootstrap”模板。决不要一开始就真正使用它，因此会有大量令人困惑的样式属性。

<section id="services" style="padding:10px;background-color:black;">
<!-- Here's where I thought fitting it would cause it to work as a background -->
    <div class="container" style="padding-top:10px;margin-top:10px;">
        <div class="row text-center" style="margin-left:auto;margin-right:auto;">
            <div style="margin-left:auto;margin-right:auto;max-width:720px;width:100%;">
                <button id="reload" onclick="return returnGame();clearDescr();">
                    <div class="notspinning" id="theSpinner"></div>
                </button>
                <span id="findMe">
                    <a href="" id="steamLink" style="color:#333" target="_blank">
                        <h4 class="service-heading" id="gameName" style="font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight: 700;font-size: 22px;color:#777;"></h4>
                    </a>
                </span>
                <p class="text-muted" id="gameDescr" style="min-height:100px;font-family:MyWebFont;"></p>
            </div>
        </div>
    </div>
</section>

任何朝着正确方向的指导将不胜感激。

最佳答案

您是否尝试过将元素设置为背景，例如position: fixed; top:0; right: 0; bottom: 0; left: 0; z-index: 0，然后是您的内容position: relative的另一个div？

例如http://codepen.io/alexander-holman/pen/rebroK

最简单的形式就是：

<style>
    #particle {
      background-color: #b61924;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
      z-index:0;
    }
    #overlay {
      position:relative;
    }
</style>
<div id="particle"></div>
<div id="overylay">[Your content here]</div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
    var options = {};
    particlesJS("particle", options);
</script>

关于javascript - 在正确的图层上获取particles.js？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37232235/