如何在HTML中用div承载particles.js作为背景且不打乱布局

解决方法 #

按以下步骤修改代码即可实现粒子效果作为底层背景，同时不打乱原有页面布局：

1. 调整父容器.main的定位属性，为粒子div提供定位基准
   修改base.html中.main的样式代码：

.main{
    min-height: 100vh;
    height: 100%;
    position: relative; /* 新增这一行 */
}

2. 调整粒子div#particles-js的样式，固定在父容器底层
   修改style.css中的对应代码：

#particles-js{
    position: absolute; /* 新增 */
    top: 0; /* 新增 */
    left: 0; /* 新增 */
    width: 100%; /* 新增 */
    height: 100%;
    z-index: 0; /* 新增，设置为最底层 */
}

3. 为页面内容区块增加层级，保证内容显示在粒子上方
   修改base.html中content区块的代码，在外层包裹一层带层级的容器：

<div class="main">
    <div id="particles-js"></div>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script>
        particlesJS.load('particles-js', "{% static 'particles.json' %}", function(){
            console.log('particles.json loaded...');
        });
    </script>
    <!-- 新增下面这个包裹层 -->
    <div style="position: relative;z-index: 1;">
        {% block content %}
        {% endblock content %}
    </div>
</div>

补充提示 #

如果需要清晰看到粒子效果，注意不要给上层内容容器设置不透明的纯色背景，可根据需求调整背景的透明度。

内容的提问来源于stack exchange，提问作者Dude