Question

好的，我将使用particleground（https://github.com/jnicol/particleground）作为页面的背景。

我添加了粒子基础，然而，它出现在页面的所有内容之上。有点像这样： -

如何才能将此作为背景？这是代码的一部分。

<body>

    <?php include 'nav.php'; ?>

    <div class="container-fluid">
        <div id="particle">
                    <div class="row">
                            <div class="col-md-3 col-sm-12 col-xs-12">
                                <img src="images/logo.png">
                            </div>
                            <div class="col-md-6 col-sm-12 col-xs-12">
                            <div class="college_name">
                                IEC  College of Engineering and Technology
                                <br>
                                presents
                            </div>
                            </div>
                        </div>
                        <br>
                        <br>
                    <div class="row">
    ........

Answer 1

为了解决这个问题，我在内容之后编写了粒子ID。例如，如果我有这个：

<div class="title">
 <p>Title</p>
</div>
<!-- Calling the particle after the content, so it will be behind the content. 
-->
<div id="particles"></div>

另外要确保在CSS中，你输入一个id #particles并声明at为100％的宽度和高度。例如：

#particles {
  width: 100%
  height: 100%
  position: fixed;


}

Answer 2

您可以为div#particle提供100％宽度和高度的固定位置。在您的导航包括：

之前

CSS

#particle {
    position: fixed;
    height: 100%;
    width: 100%;
}

HTML

 <body>
    <div id="particle"></div>

    <?php include('nav.php'); ?>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                ...
            </div>
            <div class="col-md-9">
                ...
            </div>
        </div>
    </div>
</body>

JS

$(function() {
    $('#particle').particleground({
            dotColor: 'rgba(255,255,255,0.1)',
            lineColor:'rgba(255,255,255,0.1)',
            particleRadius: 10,
            density: 5000,
            directionX: 'right',
            directionY: 'down'
    });
})

现在，您的.nav和.container-fluid将位于粒子顶部。

Answer 3

你应该像这样添加粒子div的开始标记和结束标记：

<?php include 'nav.php'; ?>

<div class="container-fluid">
    <div id="particle"></div>
                <div class="row">
                        <div class="col-md-3 col-sm-12 col-xs-12">
                            <img src="images/logo.png">
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12">
                        <div class="college_name">
                            IEC  College of Engineering and Technology
                            <br>
                            presents
                        </div>
                        </div>
                    </div>
                    <br>
                    <br>
                <div class="row">
........

将粒子场作为页面的背景

3 个答案: