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

如果您不想再拥有背景图像并将其替换为粒子，您可以根据作者Github上README的CodePen demo作为基础。

然后您需要做的就是在其下方添加所有代码并将#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。我希望这能回答你的问题。

Answer 2

我对css文件做了一点修改，删除了背景颜色＆amp;添加背景图片。转到底部的js文件删除背景颜色希望它有所帮助：

code here:
#particles-js{
width: 100%;
height: 100%;
background-color: ;
background-image: url(tt.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}

结果如下： enter image description here

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

2 个答案: