Question

我正在尝试将粒子背景jquery背景用于特定的div / section，但是当我使用jquery函数并相应地改变CSS时，粒子出现在文本上方而不是后面，正如我所希望的那样。我尝试将z-index更改为-1，但这也无济于事。我希望div保持不变，但我想要的只是粒子出现在它后面。这是HTML：

<div id="particles1">
    <section class="container-fluid action"  style="background-color: #00a1de" >
        <div class="container">
            <div class="row">
                <div class="col-md-12" >
                    <h3  style="color: white"> Lorem Ipsum is simply dummy text of the printing and typesetting industry <a href="#contact" id="go-to-contact" style="color:">contact us</a>.</h3>
                </div>
            </div>
        </div>
    </section>
</div>

以下是代码的CSS：

section.action {
    background-color: #00a1de;
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
}

section.action h3 {
    color: white;
    text-align: center;
    font-size: 26px;
    margin: 0 10px;
    line-height: 1.75em;
    display: inline-block;
}

section.action h3 a {
    text-decoration: underline;
    color: white;
}

section.action h3 a:hover {
    color: #002776;
}

@media screen and (max-width: 767px) {
    section.action h3 {
        display: block;
        margin-bottom: 20px;
    }
}

和

#particles1 {
    width: 100%;
    height: 375px;
    position: relative;
    /*overflow: hidden;*/
    background: #00a1de;
}

@media screen and (max-width: 767px) {
    #particles1 {
        width: 100%;
        height: 600px;
        position: relative;
        background: #00a1de;
    }
}

@media screen and (max-width: 375px) {
    #particles1 {
        width: 100%;
        height: 800px;
        position: relative;
        background: #00a1de;
    }
}

最后这是我正在使用的javascript：

document.addEventListener('DOMContentLoaded', function() {
    particleground(document.getElementById('particles1'), {
        dotColor: '#1b3277',
        lineColor: '#1b3277'
    });
    var intro = document.getElementById('intro');
    intro.style.marginTop = -intro.offsetHeight / 2 + 'px';
}, false);

帮助将不胜感激：）

Particleground动画背景不出现在文本后面，而是出现在文本上方

0 个答案: