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

Question

我做不到particles.js work as a background. It covers the entire page, I've tried setting a higher z-index (50) for everything I want to cover particles.js with. Here's the particles codepen。 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

您是否尝试过将元素设置为背景，例如position: fixed; top:0; right: 0; bottom: 0; left: 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>

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

Get particles.js on the correct layer?

html

javascript

css

jquery

particles.js