我的容器Div在Particle.js背景之外
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我的容器Div在Particle.js背景之外相关的知识，希望对你有一定的参考价值。
我制作了一个particle.js背景，然后我制作了一个容器。在这个容器中，我有两个带有一些数据的表，当我减小屏幕大小时，容器本身就在particle.js背景之外。我已经附上了我的问题的图像，请看看。
这是我的一个大学项目，我试图解决它过去两天，但没有得到任何具体的解决方案。
<div id="particles-js">
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
canvas {
display: block;
vertical-align: bottom;
}
#particles-js {
position: absolute;
width: 100%;
height: 100% !important;
background: #00356B;
}
.container {
margin-top: 20px;
position: absolute;
top: 50%;
right: 50%;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
color: #fff;
max-width: 90%;
padding: 2em 3em;
background-color: #131415;
text-shadow: 0px 0px 2px #131415;
font-family: 'Open Sans', sans-serif;
}
我希望容器在particle.js背景中，但它超出了背景范围.Image Of The Problem, I am havingContainer Going Outside Of The Background
答案
不要将内容放在#particles-js中。
将它们放在与position:relative共同的父母身上。
因为particles-js定位于绝对位置，如果你希望你的内容显示在粒子之上，你需要给它的容器：position: relative; z-index:1;并且还要确保内容本身没有任何背景（background可以放在普通容器上或者#particles-js元素）：
CSS：
.outer-container {
position: relative;
}
#particles-js {
position: absolute;
height: 100%;
width: 100%;
background-color: #212529; /* could go on .outer-container as well */
}
.outer-container .your-content {
position: relative;
z-index: 1;
background-color: transparent;
}
标记：
<div class="outer-container">
<div id="particles-js"></div>
<div class="your-content">
your contents here
</div>
</div>
工作范例：
particlesJS("particles-js", {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 840
}
},
color: {
value: "#ffffff"
},
shape: {
type: "triangle",
stroke: {
width: 0,
color: "#000000"
},
polygon: {
nb_sides: 42
},
},
opacity: {
value: 0.42,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 3,
random: true,
anim: {
enable: false,
speed: 42,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 210,
color: "#ffffff",
opacity: 0.42,
width: 1
},
move: {
enable: true,
speed: 4.2,
direction: "none",
random: true,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "repulse"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 420,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 420,
size: 42,
duration: 2.1,
opacity: 8.4,
speed: 3
},
repulse: {
distance: 84,
duration: 0.84
},
push: {
particles_nb: 4.2
},
remove: {
particles_nb: 2.1
}
}
},
retina_detect: true
});.outer-container {
position: relative;
}
#particles-js {
background-color: #212529;
position: absolute;
height: 100%;
width: 100%;
}
.outer-container .table-dark {
z-index: 1;
position: relative;
background-color: transparent;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://vincentgarreau.com/particles.js/assets/_build/js/lib/particles.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<div class="outer-container">
<div id="particles-js"></div>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>以上是关于我的容器Div在Particle.js背景之外的主要内容，如果未能解决你的问题，请参考以下文章
Jquery UI - 在容器/父 div 内可拖动和排序 [重复]