将 particles.js 展开到背景

Question

我买了一个模板，我正在修改它来制作我的网站，我是一名设计师，我不太了解代码，但我想学习，所以我决定冒险制作这样的网站这个。我想把插件 particles.js 作为背景，我设法把它放在索引中，但我已经这样放了，我不知道如何扩展它。就像在 photoshop 中一样，从一个角落抓取并拖动以占据整个背景。

这是问题所在：

这里是 particle.js div 到 index.html:

<div id="particles-js"
     style="background-color: #000; position: absolute; background-size: cover; background-repeat: no-repeat; background-position: 100%;">
     <canvas class="particles-js-canvas-el"
            style="width: 100%; height: 100%;" width="1617" height="708">
     </canvas>
</div>

它位于脚本上方和页脚下方。

Answer 1

您只需要一些 CSS 来定位 <div>。将此添加到您的 <style> 标签。当你在未来遇到困难时，一个好的开始是 the W3 Schools CSS intro. 祝你好运！

/* the #id of your div */
#particles-js {
    /* stay in a constant spot on the page, regardless of scroll */
    position: fixed;
    /* fill the entire page */
    width: 100%;
    height: 100%;
    /* remove the space along the edges */ 
    margin: 0;
    padding: 0;
    /* position it to start at the top of the page */
    top: 0;
    /* put it behind other content */
    z-index: -1;
}

将 particles.js 展开到背景

Expand particles.js to background

html

javascript

particles

particles.js