Question

以下是我个人网站的存储库：https://github.com/flakpanzer40/flakpanzer40.github.io

正如您所注意到的，我使用的粒子只是显示在我的名字，图像和描述之下。我已经多次尝试重叠它们，以便粒子在后面发生，但无济于事。我已经尝试过绝对位置，z-index，重新安排DIV等等。我在CSS上很糟糕。

有人可以帮忙吗？

Answer 1

请添加以下样式：

.container {
    /*other css*/
    position: relative;
    z-index: 1;
}
.particles-js-canvas-el {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

Answer 2

使用以下代码：

<强> HTML：

<div id="particles-js" style="">   
    <canvas class="particles-js-canvas-el" width="1903" height="952" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;"></canvas>
    <div class="container">        
        <div class="row">
            <div class="col-lg-12">
                <img class="img-responsive" src="img/EvanRen.jpg" alt="Evan Ren" style="width:500px;height:600px;border:5px solid white;border-radius: 50%;">
                <div class="intro-text">
                    <span class="name">University of Waterloo Computer Science</span>
                    <hr class="star-light">
                    <span class="skills">Problem_solving expert - Hardworking - Passionate</span>
                </div>
            </div>
        </div>
    </div>
 </div>

<强> CSS：

#particles-js {
    width: 100%;
    height: 100%;
    background-color: #13717c;
    position: relative;
    top: 0;
}

父母（#particles-js）拥有position: relative非常重要，这样您就可以为孩子使用绝对定位。

CSS粒子Js重叠问题

2 个答案: