我制作了一个 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 having Container Going Outside Of The Background
最佳答案
不要把内容放在#particles-js里面.
将它们与 position:relative 放在一个共同的父级中.
因为particles-js是绝对定位，如果你想让你的内容显示在粒子上面，你需要给它的容器:position: relative; z-index:1;还要确保内容本身没有任何背景(background 可以放在公共(public)容器或 #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>为什么？
因为元素带有 position:absolute将使用最近定位的祖先 (CPA) 作为引用，其中 “最近定位的祖先” 表示具有 position 的第一个最近的父级static 以外的值(默认)。
如果没有 parent 到 <body>是“定位”，<body>将被使用。
对于我们的示例，这意味着:#particles-js将使用 .outer-container作为 CPA(width: 100%; height: 100% 表示 CPA 维度的百分比)，CPA 将根据其非绝对定位内容(即 <table>)确定大小。 (因为所有 position:absolute 内容都从文档流中取出，因此其父项的行为就像该内容不存在一样)。
关于javascript - 我的容器 Div 超出了 Particle.js 背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55763325/