particles.js不覆蓋整個頁面

我試圖使用particles.js作爲背景，但我無法將畫布設置爲全尺寸背景。particles.js不覆蓋整個頁面

我試過至少10種不同的解決方案，但是沒有任何工作。畫布總是以寬高比作爲屏幕的元素的形式出現，但在調整大小時不會將其作爲整體覆蓋。成癮時，它不會設置爲背景，而是作爲身體的一個孩子，超過或低於其餘元素。

我儘可能簡化了代碼，問題仍然存在。

HTML

<!DOCTYPE HTML> 

<html> 
    <head> 
     <title>Try</title> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
     <link rel="stylesheet" media="screen" href="css/style.css"> 
    </head> 

    <body> 
     <div id="particles-js"></div> 
     <div> 
      <p>Something here</p> 
     </div> 
    </body> 

    <script src="assets/js/particles.js"></script> 
    <script src="assets/js/app.js"></script> 
</html>

CSS

canvas{ 
    display:block; 
    vertical-align:bottom; 
    position: absolute; 
} 

/* ---- particles.js container ---- */ 

#particles-js{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: #b61924; 
    background-image: url(''); 
    background-size: cover; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    top: 0; 
}

APP.JS和PARTICLES.JS可以從自己的網站上發佈之前下載。我使用主旋律他們此刻

感謝所有幫助

來源

2017-07-30 Nicola Zaltron

好吧，我終於解決了這個背景問題：這就是我如何管理它（我敢肯定，我已經試過了，但重樓全HTML，如果最後的工作）

CSS

#particles-js{ 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    background-color: #000; 
    background-image: url(''); 
    background-size: cover; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
} 

.body-particles{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 100; 
}

HTML

<html> 
    <head> 
     <title>Title</title> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 

     <!-- SOME CSSs HERE --> 

     <link rel="stylesheet" media="screen" href="assets/css/particles.css"> 

     <!-- SOME SCRIPTS HERE --> 
    </head> 
    <body> 
     <div class="body-particles"> 

     <!-- Wrapper --> 
      <div id="wrapper"> 
       <!-- MY STUFF HERE, STYLED WITH MY CSS --> 
      </div> 
     </div> 

     <!-- particles.js container --> 
     <div id="particles-js"></div> 

     <!-- scripts --> 
     <script src="assets/js/particles.js"></script> 
     <script src="assets/js/app.js"></script> 

    </body> 
</html>

現在，我有一個新的問題：被設置爲底層，它捉住沒有指針的事件。只要我能做到，我就會更新答案。

顯然，如果您有任何建議，請隨時提供幫助。

UPDATE：解決方法爲mouseEvents：添加類mouseEvents到我需要關注的元素（例如，導航欄等）

CSS

.body-particles{ 
    pointer-events: none; 
} 

.mouseEvents{ 
    pointer-events: all; 
}

但是，如果有人知道一個就好更好的方法來保持前後兩層的事件

來源

2017-07-31 10:55:05

假設你試圖模仿的例子頁面，我會做的是：

body: { 
    padding: 0px; 
    margin: 0px; 
} 

canvas{ 
    width: 100%; 
    height: 100%; 
} 

/* ---- particles.js container ---- */ 

#particles-js{ 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    z-index: 0; 
    top: 0px; 
    left: 0px; 
    background-color: #b61924; 
    background-image: url(''); 
    background-size: cover; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
} 

.actual-content-container 
{ 
    z-index: 100; 
    /* whatever other style properties you want. Apply this class to the div or other element you put your actual content in.*/ 
}

這是基本上演示頁面是如何做的。關鍵是z-index屬性。如果你想要的是一個與實際內容一起滾動的背景，請嘗試將particles-js id的位置元素更改爲絕對值。我認爲這應該讓你進球。

來源

2017-07-31 00:40:29

仍然是同樣的問題..已經嘗試過至少30個不同的設置，像這樣玩位置，z-索引和各種屬性，但沒有人修復。我總是以相同的結果完成，也複製這個CSS，應用你的實際內容容器類，並嘗試修改它在某些方面維護您的整體想法：/ –

@NicolaZaltron：[Risa__B]（https：// stackoverflow。 com/users/8280885/risa-b）[建議]（https://stackoverflow.com/review/suggested-edits/16879239）將'canvas'和'#articles-js'改爲使用width：100vw;身高：100vh'而不是100％。我張貼這個，因爲該用戶還沒有[評論特權]（https://stackoverflow.com/help/privileges/comment）。 – tom

@tom仍然是一樣的，也使用vw和vh是我第一次嘗試的一次，但沒有解決它。 –

particles.js不覆蓋整個頁面

回答

相關問題