javascript - particle.js 的问题
问题描述
我正在尝试使用particles.js 库作为背景，但粒子一直显示在元素下。我尝试使用 Z-index，但它不起作用，还在 Stack-overflow、Google 和 YouTube 上进行了搜索，但没有任何用处。我几乎使用了 CSS 中的所有内容，但也没有任何用处。
这是我的代码：
const particlesJSON = {
"particles": {
"number": {
"value": 40,
"density": {
"enable": true,
"value_area": 500
}
},
"color": {
"value": "#ff9800"
},
"shape": {
"type": "polygon",
"stroke": {
"width": 2,
"color": "#ff9800"
},
"polygon": {
"nb_sides": 6
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": true
},
"size": {
"value": 10,
"random": true
},
"line_linked": {
"enable": false,
"distance": 200,
"color": "#ff5722",
"opacity": 0.3,
"width": 2
},
"move": {
"enable": true,
"speed": 5,
"direction": "bottom",
"random": true,
"straight": true,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": [
"grab",
"bubble"
]
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 0.7
}
},
"bubble": {
"distance": 600,
"size": 12,
"duration": 1,
"opacity": 0.8,
"speed": 2
},
"repulse": {
"distance": 400,
"duration": 0.4
},
"push": {
"particles_nb": 20
},
"remove": {
"particles_nb": 10
}
}
},
"retina_detect": true
}
particlesJS("sec", particlesJSON) *{
margin: 0;
padding: 0;
height: 100vh;
}
.container{
max-width: 100%;
padding-left: 70px;
padding-right: 70px;
}
.card{
background-color: rgb(255, 255, 255)!important;
overflow: hidden;
border: medium none;
border-radius: 6px;
box-shadow: -1px 92px 99px -62px rgba(0,0,0,0.12), 0 25px 65px 0 rgba(0,0,0,0.08);
height: 80%;
text-align: center;
}
.testimonials-item{
padding: 37px;
}
.card-info{
padding-right: 10px;
padding-left: 10px;
}
#text1{
font-size: 23px;
color: #f0c504c4;
font-family: 'Nunito', sans-serif;
margin-bottom: 0;
}
#text2{
color: #7d8b9b;
font-size: 15px;
}
.row{
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.row2{
margin-top: 17px;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.wow{
margin-bottom: 30px;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel=”stylesheet” href=”css/bootstrap-responsive.css”>
<link rel="stylesheet" href="hello.css">
<title>Particles</title>
</head>
<body>
<section id="sec">
<div class="container">
<!-- code below for the cards -->
<div class="row">
<div class="col-md-4 wow " >
<div class="card testimonials-item">
<div>
<div class="card-content">
<div class="card-info">
<h6 id="text1">content?</h6>
<p id="text2">content content content content content content content content content content</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 wow">
<div class="card testimonials-item">
<div>
<div class="card-content">
<div class="card-info">
<h6 id="text1">content</h6>
<p id="text2">content content content content content content content content content content</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 wow" >
<div class="card testimonials-item">
<div>
<div class="card-content">
<div class="card-info">
<h6 id="text1">content</h6>
<p id="text2">content content content content content content content content content content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script src="json-particles.js"></script>
<!-- THIS JavaScript code for Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3h66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html> 解决方案
给你的画布一个固定的位置，把它放在顶部。
const particlesJSON = {
"particles": {
"number": {
"value": 40,
"density": {
"enable": true,
"value_area": 500
}
},
"color": {
"value": "#ff9800"
},
"shape": {
"type": "polygon",
"stroke": {
"width": 2,
"color": "#ff9800"
},
"polygon": {
"nb_sides": 6
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": true
},
"size": {
"value": 10,
"random": true
},
"line_linked": {
"enable": false,
"distance": 200,
"color": "#ff5722",
"opacity": 0.3,
"width": 2
},
"move": {
"enable": true,
"speed": 5,
"direction": "bottom",
"random": true,
"straight": true,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": [
"grab",
"bubble"
]
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 0.7
}
},
"bubble": {
"distance": 600,
"size": 12,
"duration": 1,
"opacity": 0.8,
"speed": 2
},
"repulse": {
"distance": 400,
"duration": 0.4
},
"push": {
"particles_nb": 20
},
"remove": {
"particles_nb": 10
}
}
},
"retina_detect": true
}
particlesJS("sec", particlesJSON) *{
margin: 0;
padding: 0;
height: 100vh;
}
canvas {
position: fixed;
top: 0;
}
.container{
max-width: 100%;
padding-left: 70px;
padding-right: 70px;
}
.card{
background-color: rgb(255, 255, 255)!important;
overflow: hidden;
border: medium none;
border-radius: 6px;
box-shadow: -1px 92px 99px -62px rgba(0,0,0,0.12), 0 25px 65px 0 rgba(0,0,0,0.08);
height: 80%;
text-align: center;
}
.testimonials-item{
padding: 37px;
}
.card-info{
padding-right: 10px;
padding-left: 10px;
}
#text1{
font-size: 23px;
color: #f0c504c4;
font-family: 'Nunito', sans-serif;
margin-bottom: 0;
}
#text2{
color: #7d8b9b;
font-size: 15px;
}
.row{
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.row2{
margin-top: 17px;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.wow{
margin-bottom: 30px;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel=”stylesheet” href=”css/bootstrap-responsive.css”>
<link rel="stylesheet" href="hello.css">
<title>Particles</title>
</head>
<body>
<section id="sec">
<div class="container">
<!-- code below for the cards -->
<div class="row">
<div class="col-md-4 wow " >
<div class="card testimonials-item">
<div>
<div class="card-content">
<div class="card-info">
<h6 id="text1">content?</h6>
<p id="text2">content content content content content content content content content content</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 wow">
<div class="card testimonials-item">
<div>
<div class="card-content">
<div class="card-info">
<h6 id="text1">content</h6>
<p id="text2">content content content content content content content content content content</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 wow" >
<div class="card testimonials-item">
<div>
<div class="card-content">
<div class="card-info">
<h6 id="text1">content</h6>
<p id="text2">content content content content content content content content content content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script src="json-particles.js"></script>
<!-- THIS JavaScript code for Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3h66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html> 推荐阅读
- google-cloud-platform - G Suite 目录用户创建失败并出现错误 - “无效输入：primary_user_email”
- python - Python/Pandas - Long to Wide/ 或 Pivot 或 Stack/Unstack
- c++ - 使用 msys2/mingw64 在 CLang 中测试协程时出错
- c - Txt 解析为二维数组并转换浮点数
- javascript - 如何通过Angular中数组中的不同对象迭代*ngFor？
- android-studio - 将项目与 Gradle 文件同步时发生的错误“无法执行 org.gradle.cache.internal”是什么？
- android - 使用 Appium 运行移动 UI 测试的正确方法是什么？
- jenkins - Jenkins 工作区文件夹路径以双引号显示，并且 html-publisher 插件无法检测到 allure-report 文件夹
- jquery - jquery悬停不恢复'mouseleave'
- bluetooth - ESP32 上的 Micropython 和蓝牙