将particles.js 展开到背景 [英] Expand particles.js to background

查看：30 发布时间：2021/9/23 20:33:17 javascript html particles particles.js

本文介绍了将particles.js 展开到背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I bought a template and I'm modifying it to make my website, I'm a designer, and I do not have much idea of code but I want to learn and I decided to venture into making the web like this. I want to put the plugin particles.js as background, I managed to put it in the index but I have been put like this and I have no idea how to do to expand it. As if in photoshop take it from a corner and drag to occupy the whole background.

问题来了:

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

And here's the particle.js div onto 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>

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

解决方案

推荐答案

您只需要一些 CSS 来定位


/* 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;
}

.将此添加到您的