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

Question

我做不到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> 中的所有内容同样，不知道为什么。

您将要看到的代码只不过是一个被屠杀的 ole' 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>

任何形式的正确方向的指导将不胜感激。

Answer 1

您是否尝试过将元素设置为背景，例如位置:固定；顶部:0；右:0；底部:0；左:0； z-index: 0 然后是你的内容的另一个 div position: relative?

例如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>