在正确的图层上获取particles.js?
问题描述:
我不能让particles.js作为背景工作。它涵盖了整个页面,我试图设置一个更高的z-index(50)来表示我想要覆盖particles.js的所有内容。这是particles codepen。该codepen没有背景,因此颗粒不可见。在正确的图层上获取particles.js?
下面的代码是我想设置为<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>
以及所有内容,不知道为什么。
您即将看到的代码只不过是一个butchered的ole'bootstrap模板。从来没有打算真正使用它,因此风格属性的数量混乱。
<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>
任何形式的指导只是在正确的方向将不胜感激。
答
您是否试过将元素设置为背景,例如: 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>
我已经试过类似的解决方案,但我已经知道如何面对这样的事实,一个网站的整个潦草的借口是问题。这解决了一个问题,打破了另一个问题。如果我想利用这个,我只需要正确地做事。虽然谢谢! –
正确无误!但你是否也尝试过让你的'.container''位置:relative;'? –