Javascript 如何将内容置于particle.js之上
因此,我试图在网站主体中创建一个导航和页脚,但particle.js一直覆盖着这些元素。我试过z-index,但它没有显示出来。particle.js不允许我触摸导航栏或页脚。如果你能帮忙,我将不胜感激。 HTML: particle.js:Javascript 如何将内容置于particle.js之上,javascript,html,css,particles.js,Javascript,Html,Css,Particles.js,因此,我试图在网站主体中创建一个导航和页脚,但particle.js一直覆盖着这些元素。我试过z-index,但它没有显示出来。particle.js不允许我触摸导航栏或页脚。如果你能帮忙,我将不胜感激。 HTML: particle.js: var pJS = function(tag_id, params){ var canvas_el = document.querySelector('#'+tag_id+' > .particles-js-canvas-el'); /*
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,
random: false,
anim: {
enable: false,
speed: 20,
size_min: 0,
sync: false
}
},
line_linked: {
enable: true,
distance: 100,
color: '#fff',
opacity: 1,
width: 1
},
move: {
enable: true,
speed: 2,
direction: 'none',
random: false,
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,
duration: 0.4
},
push:{
particles_nb: 4
},
remove:{
particles_nb: 2
}
},
mouse:{}
},
retina_detect: false,
fn: {
interact: {},
modes: {},
vendors:{}
},
tmp: {}
};
谢谢你帮助我 使用
位置:固定
而不是绝对的
并使用交互式div的z-索引来表示高于1的值
最后,不要在div中保留任何显示粒子的内容
我知道这很难理解,因为您没有使用React.js
但是你所遇到的问题会用这个解决的
因此,我的
组件包含particles.js文件,我的所有其他
和其他内容从
到
如果您可以看到,我已经为我的粒子组件使用了一个类particles
。这是它的样式
position: fixed;
width: 100%;
z-index: -1;
}
我的所有其他
的z-index
都超过1。
这是输出
所以我应该只在导航栏和页脚类中有一个高于Z的索引吗?如果我想在内容中间的内容,js,我仍然不需要在div中保留任何东西?我恐怕那是行不通的。还有什么我可以试试的吗?这有用吗?绝对有用!非常感谢你。
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,
random: false,
anim: {
enable: false,
speed: 20,
size_min: 0,
sync: false
}
},
line_linked: {
enable: true,
distance: 100,
color: '#fff',
opacity: 1,
width: 1
},
move: {
enable: true,
speed: 2,
direction: 'none',
random: false,
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,
duration: 0.4
},
push:{
particles_nb: 4
},
remove:{
particles_nb: 2
}
},
mouse:{}
},
retina_detect: false,
fn: {
interact: {},
modes: {},
vendors:{}
},
tmp: {}
};
position: fixed;
width: 100%;
z-index: -1;
}