正しいレイヤーにparticles.jsを取得しますか？

Question

particles.jsをバックグラウンドとして処理させることはできません。それはページ全体をカバーしています。私はparticles.jsでカバーしたいすべてのZインデックス（50）を高く設定しようとしました。ここには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>内部のすべてをカバーすることです。

あなたが目にしているコードは、ブートアップテンプレートではありません。最初にそれを実際に使用するつもりはないので、スタイル属性の混乱を招くことになります。

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