0

我不能让particles.js作为背景。它覆盖了整个页面，我尝试为我想要覆盖particle.js 的所有内容设置更高的z-index (50)。这是粒子 codepen。密码笔没有背景，因此粒子是不可见的。

下面的代码是我试图设置为背景的<section id="services">。

<!-- particles.js container --> 
<div id="particles-js"></div> 
<!-- stats - count particles --> 
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js --> 
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 
<!-- stats.js lib --> <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>

问题是它也涵盖了内部<section>的所有内容，不知道为什么。

您将要看到的代码只不过是一个被屠杀的 ole' 引导模板。从一开始就没有打算真正使用它，因此样式属性的数量令人困惑。

<section id="services" style="padding:10px;background-color:black;">
<!-- Here's where I thought fitting it would cause it to work as a background -->
    <div class="container" style="padding-top:10px;margin-top:10px;">
        <div class="row text-center" style="margin-left:auto;margin-right:auto;">
            <div style="margin-left:auto;margin-right:auto;max-width:720px;width:100%;">
                <button id="reload" onclick="return returnGame();clearDescr();">
                    <div class="notspinning" id="theSpinner"></div>
                </button>
                <span id="findMe">
                    <a href="" id="steamLink" style="color:#333" target="_blank">
                        <h4 class="service-heading" id="gameName" style="font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight: 700;font-size: 22px;color:#777;"></h4>
                    </a>
                </span>
                <p class="text-muted" id="gameDescr" style="min-height:100px;font-family:MyWebFont;"></p>
            </div>
        </div>
    </div>
</section>

任何在正确方向上的指导将不胜感激。

4

1 回答 1

1

您是否尝试过将一个元素设置为背景，例如position: fixed; top:0; right: 0; bottom: 0; left: 0; z-index: 0，然后为您的内容设置另一个 div position: relative？

例如http://codepen.io/alexander-holman/pen/rebroK

以最简单的形式，您的标记将如下所示：

<style>
    #particle {
      background-color: #b61924;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
      z-index:0; 
    }
    #overlay {
      position:relative;
    }
</style>
<div id="particle"></div>
<div id="overylay">[Your content here]</div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
    var options = {};
    particlesJS("particle", options); 
</script>
于 2016-05-14T22:21:12.200 回答