javascript - 用粒子地面替换背景图像？

Question

我找到了这个可以找到的甜蜜粒子系统HERE .

我基本上是想用这个粒子系统替换背景图像，但不幸的是粒子会位于我的导航栏上方并填满屏幕，然后我必须滚动才能找到我的网站内容。下面是我的索引页面的照片，用于直观表示。 (我使用的是大部分内容未填写的模板，所以请不要判断措辞 :P)

此处显示的内容代码:

<div class="bg">

        <div id="home" class="header wow bounceInDown" >
                <div class="top-header">
                    <div class="container">
                    <div class="logo">
                        <a href="#"><img src="images/logo.png" title="dreams" /></a>
                    </div>
                    <!----start-top-nav---->
                     <nav class="top-nav">
                        <ul class="top-nav">
                            <li class="active"><a href="#home" class="scroll">Home</a></li>
                            <li><a href="#services" class="scroll">Services</a></li>
                            <li><a href="#port" class="scroll">FAQ</a></li>
                            <li><a href="#about" class="scroll">About</a></li>
                            <li><a href="#contact" class="scroll">Contact</a></li>
                            <li><a href="loginNew.php">Login</a></li>
                        </ul>
                        <a href="#" id="pull"><img src="images/menu-icon.png" title="menu" /></a>
                    </nav>
                    <div class="clearfix"> </div>
                </div>
            </div>
        </div>
        <!----- //End-header---->
        <!---- banner ---->
        <div class="banner wow fadeIn" data-wow-delay="0.8s">

            <div class="container">

                <div class="banner-info text-center">

                    <h1>Smart trading for the smarter investor.</h1><br />
                    <span> </span>
                    <p>We are a digital agency that believes in building things that are  meaningful!</p>
                    
                    <div class="contact-right wow fadeInLeft">
                        <form class="test" action="indexNew.php" method="post" autocomplete="off">
                            <p class="borders">Sign Up For Crypto Pals</p>
                            <input type="text" required class="text" name='user_name' placeholder="Username...">
                            <input type="email" required class="text" name='email' placeholder="Email...">
                            <input type="password" required class="text" name='password' placeholder="Password...">
                            <input class="wow shake" data-wow-delay="0.3s" type="submit" value="Sign Up" name="register" />
                        </form>

                    </div>
                    <br/>
                    <a class="account" href="loginNew.php">Already have an account? Sign In.</a>
                </div>
            </div>
        </div>
    
    </div>

所以<div class="bg">有这个 CSS:

.bg{
    background:url(../images/baner.jpg) no-repeat 0px 0px;
    background-size:cover;
}

我尝试简单地添加 particles我的课<div class="big">但这会掉落整个站点并仍然显示其上方的粒子。

我真的希望我提供了足够的信息。谢谢

Answer 1

如果你不想再有背景图片而只是用粒子替换它，你可以基于 CodePen demo可从作者 Github 上的 README 获得。

然后您需要做的就是在其下方添加所有代码并将 #particles-js z-index 更改为负值:

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: darkgrey;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  z-index: -3;
}

这是一个有效的 CodePen .我希望这能回答您的问题。