Particles.js作爲僅特定部分的背景

我使用由Vincent Garreau（將鏈接但不能共享多個鏈接）的Particles.js在我的網站的特定部分實現粒子效果背景。Particles.js作爲僅特定部分的背景

<div id="particles-js" > 

<section class="page-section features" > 
<div class="container relative" > 
    <div class=" font-alt hs-line-2 mb-30"> 
    <!-- Other relevant code for this section --> 
    </div> 
    </div> <!--end container div--> 
    </section> 
</div> <!-- End particles div>

的CSS

#particles-js { 
    background-color: #000; 
    position: absolute; 
    z-index: 50; 
    width: 100%; 
    height: 100%; 
    top: 0; 
} 

.page-section { 
    width: 100%; 
    display: block; 
    position: relative; 
    overflow: hidden; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 90px 0; 
}

類 '特色' 沒有樣式規則。

然而，這是代碼的輸出：http://imgur.com/a/Ce9Sh（圖像1）

顆粒DIV是下的特徵部分。沒有設置爲背景。

設置一個位置：絕對或固定的粒子div完全破壞了功能部分的佈局，因爲功能部分出現在很多其他元素之後。

設置粒子div上固定位置的上邊和左邊的邊距使得這些特徵永久固定在屏幕上，無法向下滾動。

絕對螺絲固定特徵部分和particles.js的位置仍然不可見。

這是怎麼看起來像當我設置的位置是：絕對的標籤上的顆粒DIV：http://imgur.com/a/Ce9Sh（IMG2）

所有我想要的是顯示了背後的功能部分，不單獨它下面的顆粒。

任何幫助將被認爲。

來源

2017-07-14 Arun O

也許給功能一個透明的背景和顆粒黑色？ – Gerard

不起作用。試過了。 –

我有同樣的問題！我所做的是基本設置particles.js作爲一個固定的背景：

view.html

<div id="particles-js" class="animation_background"></div> 
<section> 
... 
... 
</section>

styles.css.scss

.animation_background { 
    background-color: #08090d; 
    width: 100%; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 0; 
}

然後我不得不集合Z - 指數高於0的所有其他元素，因此它在背景之上。由於性能方面的原因，這種解決方案並不完美，但它會給你帶來希望的效果！

來源

2017-10-27 09:48:45 trickydiddy

Particles.js作爲僅特定部分的背景

回答

相關問題