全屏幕div上的覆盖particles.js
全屏幕div上的覆盖particles.js
提问于 2016-02-01 20:45:12
我正在使用以下.js插件：
https://github.com/VincentGarreau/particles.js/
有了引导3的巨无霸，我已经开始运行插件，当你进入我的主页(我认为这就是问题所在)时，我的巨型加速器是全屏的，我试图在我的巨型加速器下运行particles.js，但出于某种原因，粒子在我的巨型加速器下面产生了一个完整的视口。就像它安装在自己的DIV中一样，它是在我的巨型加速器单元之后安装的，但是我已经将<div id="particles-js"></div>封装在了我的巨型DIV上。这就是我迷失的地方，我设置它的方式应该显示在我的巨无霸内容和所有东西下面。
以下是我的HTML：
<div id="particles-js">
<div class="jumbotron">
<div class="container center-vertically">
<div class="col-lg-6 col-lg-offset-3 text-center">
<h1>
A template with a bit of a different <strong>look & feel</strong>.
</h1>
<hr>
<p>Particles is a fun and multipurpose template, with clean & modern design <i>+</i> code.</p>
</div>
</div>
</div>
</div>以及巨型加速器和粒子的CSS -js ID：
.jumbotron {
height: 100%;
width: 100%;
font-family: 'Roboto', sans-serif;
color: #fff;
padding-top: 79px;
padding-bottom: 0;
display: table;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background: #6819e8; /* Old browsers */
background: -moz-linear-gradient(left, #6819e8 0%, #7437d0 35%, #615fde 68%, #6980f2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6819e8', endColorstr='#6980f2',GradientType=1 ); /* IE6-9 */
}
.center-vertically {
display: table-cell;
text-align: center;
vertical-align: middle;
}我还上传了一个实时版本，这样可以更容易地查看问题：
http://aliensix.com/company/
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-01 21:08:29
我认为你需要做的是让你的#particles-js成为.jumbotron的孩子。
#particles-js需要相对于.jumbotron进行绝对定位。
<div class="jumbotron">
<div id="particles-js"></div>
</div>CSS
.jumbotron {
position: relative;
// Other style rules ...
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35139958
复制相关文章
相似问题
腾讯云开发者
