如何解决如何将内容放置在particle.js之上/之上
因此,我试图在网站的主体中创建导航和页脚,但particle.js会不断覆盖这些元素。我已经尝试过z-index,但它没有提出。 particle.js不允许我触摸导航栏或页脚。希望能有所帮助。 HTML:
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Blog</title>
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="CSS/blog.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="index.html" >Home</a>
<a href="aboutMe.html">About Me</a>
<a href="resume.html">Resume</a>
<a href="blog.html" class="active">Blog</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div id="particles-js">
<p style="color: white; font-size: 30px;">Coming soon!</p>
</div>
<script type="text/javascript" src="js/particles.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<div class="footer">
<a href="#" target="_blank">
<img alt="LinkedIn" src="images/linkedin.png" id="linkedin">
</a>
<a href="#" target="_blank">
<img alt="Github" src="images/github.png" id="github">
</a>
</div>
</body>
</html>
CSS:
* {
text-decoration: none;
Box-sizing: border-Box;
}
body{
padding: 0;
margin: 0;
/*height: 100vh;*/
}
#particles-js{
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
/*width: 100%;
height: 100vh;*/
background: #8000FF;
display: flex;
justify-content: center;
align-items: center;
}
.particles-js-canvas-el{
position: absolute;
}
.topnav {
overflow: hidden;
background-color: rgb(0,0);
}
.topnav a {
float: left;
display: block;
color: #8000FF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
font-family: "Brush Script MT";
}
.topnav a:hover {
background-color: #8000FF;
color: white;
}
.topnav a.active {
background-color: #8000FF;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.footer{
display: inline-flex;
width: 100%;
height: 75px;
text-decoration: none;
background-color: rgb(0,0);
text-align: center;
align-items: center;
z-index:999;
}
.footer [alt = "LinkedIn"],[alt="Github"]{
float: right;
width: 50px;
text-align: center;
align-items: center;
}
var pJS = function(tag_id,params){
var canvas_el = document.querySelector('#'+tag_id+' > .particles-js-canvas-el');
/* particles.js variables with default values */
this.pJS = {
canvas: {
el: canvas_el,w: canvas_el.offsetWidth,h: canvas_el.offsetHeight
},particles: {
number: {
value: 400,density: {
enable: true,value_area: 800
}
},color: {
value: '#fff'
},shape: {
type: 'circle',stroke: {
width: 0,color: '#ff0000'
},polygon: {
nb_sides: 5
},image: {
src: '',width: 100,height: 100
}
},opacity: {
value: 1,random: false,anim: {
enable: false,speed: 2,opacity_min: 0,sync: false
}
},size: {
value: 20,speed: 20,size_min: 0,line_linked: {
enable: true,distance: 100,color: '#fff',opacity: 1,width: 1
},move: {
enable: true,direction: 'none',straight: false,out_mode: 'out',bounce: false,attract: {
enable: false,rotateX: 3000,rotateY: 3000
}
},array: []
},interactivity: {
detect_on: 'canvas',events: {
onhover: {
enable: true,mode: 'grab'
},onclick: {
enable: true,mode: 'push'
},resize: true
},modes: {
grab:{
distance: 100,line_linked:{
opacity: 1
}
},bubble:{
distance: 200,size: 80,duration: 0.4
},repulse:{
distance: 200,push:{
particles_nb: 4
},remove:{
particles_nb: 2
}
},mouse:{}
},retina_detect: false,fn: {
interact: {},modes: {},vendors:{}
},tmp: {}
};
感谢您的帮助!
解决方法
使用position: fixed
而不是绝对的
并使用交互式div的z-index到一个以上
最后不要在显示粒子的div内保留任何内容。
我知道这不是很容易理解,因为您没有使用React.js 但是您遇到的问题可以通过此方法解决。
所以我的<Particle/>
组件包含了particles.js文件以及我所有的其他<div>
和其他内容,从<Navigation />
到<FaceRecognition />
如果可以看到我为我的粒子组件使用了类particles
。这是它的样式
position: fixed;
width: 100%;
z-index: -1;
}
和我所有其他<div>
的{{1}}都大于1。
这是输出
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。