在正確的圖層上獲取particles.js？

Question

我不能讓particles.js作爲背景工作。它涵蓋了整個頁面，我試圖設置一個更高的z-index（50）來表示我想要覆蓋particles.js的所有內容。這是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>以及所有內容，不知道爲什麼。

您即將看到的代碼只不過是一個butchered的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>