如何设置particles.js为背景

Question

我有一个小的 HTML 文件，我想要 particle.js 作为背景，但它只出现在屏幕的某个部分，请推荐一些解决方案

@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital@1&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body
{
    background:grey;
}
body .container-fluid .row .col-12 ,body .container-fluid .row .col-sm-1
{
    left: 35%;
}
#wel
{
    margin-left: 6%;
    font-family: 'Rowdies', cursive;
}
h3,h6
{
    font-family: 'Work Sans', sans-serif;
}
#submit-button
{
    margin-left: 6%;
    ;
}
#particles-js
{
    position: absolute;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>strong password generator</title>
    <br>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="./home.css">
</head>
<body>
    <div id="particles-js"></div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <h1 id="wel">WELCOME!!!!</h1>
            </div>
            <div class="col-12">
                    <br>
                    <p>
                        <h3>GENERATE  A  STRONG  PASSWORD</h3>
                    </p>
            </div>
        </div>
        <form action="{% url 'password' %}" method="GET">
            <div class="form-group row">
                <label class="col-sm-1 col-form-label" for="select-number">
                    Length:
                </label>
                <div class="col-sm-3 col-12">
                <input type="number" name="select-number" min="6"  max="20" value="12" selected='selected' placeholder="Length">
                </div>
                <div class="col-12">
                    <span>
                        <label for="UPPER" class="col-form-label">
                           <h6> UPPER : </h6>
                        </label>
                        <input type="checkbox" name="UPPER">
                    </span>
                    &nbsp; &nbsp;
                    <span>
                        <label for="specialcharacter" class="col-form-label">
                            <h6>SPECIAL CHARACTER : </h6>
                        </label>
                        <input TYPE="checkbox" name="specialcharacter">
                    </span>
                    &nbsp;&nbsp;
                    <span>
                        <label for="number" class="col-form-label">
                           <h6>NUMBER : </h6> 
                        </label>
                        <input type="checkbox" name="number">
                    </span>
                    <br><input type="submit" value="GENERATE PASSWORD" class="btn btn-primary btn-lg" id="submit-button">
                </div>
            </div>
        </form>
    </div>
    <script src="./particles.js"></script>
    <script src="./app.js"></script>
</body>
</html>

这是我使用的 HTML 和 CSS 代码。我在后端使用 Django，但我认为没有必要调试它。所以，我不在这里包括它。

Answer 1

将这些样式添加到您的粒子 ID，重点是使用 z-index.

    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: absolute;
    z-index: 0;
    overflow: hidden;

Answer 2

使用z-index和位置：相对；

如何设置particles.js为背景

How to set particles.js as a background

html

css

django

particles.js