将particles.js扩展到背景

时间:2018-12-11 00:19:36

标签: javascript html particles particles.js

我购买了一个模板,并正在对其进行修改以使其成为我的网站,我是一名设计师,并且我对代码的了解不多,但我想学习,因此决定冒险制作这样的网络。我想将插件particles.js作为背景,我设法将其放入索引中,但是我一直被这样放置,我不知道如何扩展它。就像在photoshop中一样,将其从一个角落移开并拖动以占据整个背景。

这是问题所在:
Here's the problem

这是index.html上的particle.js div:

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

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

1 个答案:

答案 0 :(得分:0)

您只需要一些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;
}

enter image description here