Question

我正在尝试将ParticlesJs http://vincentgarreau.com/particles.js/添加到我的部分，我已设法将其添加到我使用的其他网站，但我从未将其用于部分。
我现在遇到的问题是，当我将它添加到我的部分时它没有出现，而不是我的背景图像，我希望有粒子js。

我有一个文件夹（mainforlder），里面有3个文件夹图片
CSS
JS

在mainforlder中我有app.js和particles.js。
HTML

<!DOCTYPE html>
<head>
    <title>Full Screen Landing Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link href="css/animate.css" rel="stylesheet"/>
    <link href="css/waypoints.css" rel="stylesheet"/>
    <script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
    <script src="js/waypoints.js" type="text/javascript"></script>
</head>
<body>
    <section class="intro" id="particles-js" class="particlesjsdiv">
        <div class="inner">
            <div class="content" >

                <section class="os-animation" data-os-animation="fadeInRight" data-os-animation-delay="0s" >
                    <h1>Welcome</h1>
                </section>

                <section class="os-animation" data-os-animation="fadeInRight" data-os-animation-delay="0.1s">
                    <a class="btn" href="#">Download</a>
                </section>

            </div>
        </div>
    </section>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non laoreet dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras tempor urna vel augue ornare, sit amet tempus mi porta. Suspendisse et urna id tellus finibus iaculis eu ac diam. Cras eu lacinia nunc. Vivamus ullamcorper gravida aliquet. Proin vel eleifend dolor, id fringilla purus. Curabitur felis purus, molestie non scelerisque eu, pellentesque sit amet libero. Sed et malesuada est. Nulla diam orci, rhoncus sit amet tincidunt eu, ullamcorper et nibh. Etiam laoreet vestibulum odio at tincidunt. Duis luctus nec enim a accumsan. Nullam ipsum sem, laoreet placerat suscipit id, posuere non dolor. Ut ante nisl, dictum vel arcu eget, luctus vulputate ligula.</p>
    <script type="text/javascript" src="particles.js"></script>
    <script type="text/javascript" src="app.js"></script>
</body>

CSS

@import url('https://fonts.googleapis.com/css?family=Muli');
@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400');


html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.intro {
    height: 100%;
    width: 100%;
    margin: auto;
    background: url("images/architecture-2562705_1920.jpg") no-repeat 50% 50%;
    display: table;
    top: 0;
    background-size: cover;
}

.intro .inner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    max-width: none;
}

.content {
    max-width 600px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 28%;
}

.content h1 {
    font-family: 'Yantramanav', sans-serif;
    font-size: 600%;
    color: #E1EfE9;
    font-weight: 100;
    line-height: 70%;
}

.btn {
    font-family: 'Montserrat', sans-serif;
    font-size: 135%;
    font-weight: 400;
    color: #3A6168;
    text-transform: uppercase;
    text-decoration: none;
    border: solid #3A6168;
    padding: 10px 20px;
    border-radius: 9px;
    transition: all 0.5s;
}

.btn:hover {
    color: #CBDFD6;
    border: solid #CBDFD6 2px;
}

p {
    font-size: 150%;
    line-height: 120%;
    font-family: 'muli', sans-serif;
}

/*--- Media Queries --*/
@media screen and (max-width: 900px) {

}
@media screen and (max-width: 768px) {

}
@media screen and (max-width: 480px) {

}

如何正确地将此脚本添加到我的部分？

0 个答案: