將particleground作爲頁面的背景

好的，所以我打算使用particleground（https://github.com/jnicol/particleground）作爲頁面的背景。將particleground作爲頁面的背景

我已經添加了粒子基礎，但是，它出現在頁面的所有內容之上。有點像這樣： -

我能做些什麼來以此爲背景？這是代碼的一部分。

<body> 

    <?php include 'nav.php'; ?> 

    <div class="container-fluid"> 
     <div id="particle"> 
        <div class="row"> 
          <div class="col-md-3 col-sm-12 col-xs-12"> 
           <img src="images/logo.png"> 
          </div> 
          <div class="col-md-6 col-sm-12 col-xs-12"> 
          <div class="college_name"> 
           IEC College of Engineering and Technology 
           <br> 
           presents 
          </div> 
          </div> 
         </div> 
         <br> 
         <br> 
        <div class="row"> 
    ........

來源

2016-02-24 Akshay

嗯..什麼？你能多解釋一下，你也試過了嗎？我認爲你只需要在你的其他內容之前關閉你的particle div，但沒有想法，因爲你沒有提供任何內容。 – Pogrindis

@Pogrindis 我想讓particlegroud成爲整個頁面的背景。目前，它出現在所有內容之上。所以就是這樣，首先是particleground，然後是其他內容。我試過玩CSS，沒有運氣。 – Akshay

您可以給你的div#particle一個100％寬度和高度的固定位置。而在此之前你的資產淨值包括：

CSS

#particle { 
    position: fixed; 
    height: 100%; 
    width: 100%; 
}

HTML

<body> 
    <div id="particle"></div> 

    <?php include('nav.php'); ?> 

    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-3"> 
       ... 
      </div> 
      <div class="col-md-9"> 
       ... 
      </div> 
     </div> 
    </div> 
</body>

$(function() { 
    $('#particle').particleground({ 
      dotColor: 'rgba(255,255,255,0.1)', 
      lineColor:'rgba(255,255,255,0.1)', 
      particleRadius: 10, 
      density: 5000, 
      directionX: 'right', 
      directionY: 'down' 
    }); 
})

現在，你.nav和.container-fluid會坐到那邊的你的粒子地面上。

來源

2016-02-24 13:08:58

現在我的內容甚至不可見。整個地區都被隕石覆蓋。 – Akshay

要解決這個問題，我在我的內容後面寫了particle id。例如，如果我有這個：

<div class="title"> 
<p>Title</p> 
</div> 
<!-- Calling the particle after the content, so it will be behind the content. 
--> 
<div id="particles"></div>

也確保在CSS中，你把一個ID #particles和聲明在100％的寬度和高度。例如：

#particles { 
    width: 100% 
    height: 100% 
    position: fixed; 


}

來源

2017-12-19 17:52:20 Kahoot

將particleground作爲頁面的背景

回答

相關問題