[英]How to set particles-js to background?
我正在嘗試設置與此類似的頁面,此處的中心元素位於正在運行的動畫的前面: https : //vincentgarreau.com/particles.js/#default
我設置了這樣的內容,它占據了自己的空間,與其他內容分開,而不是后面:
我希望我的文本出現在粒子動畫的前面。 您能幫忙嗎? 我嘗試使用“ z-index”未成功: <div style="z-index: -1"></div>
我的完整代碼在這里 ,或者僅在下面粘貼最重要的部分。
我將此添加到我的HTML:
<!-- particles.js container -->
<div id="particles-js"></div>
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
</script>
CSS:
body {
background-color: #789;
margin-left: 5px;
margin-right: 5px;
padding-top: 60px;
z-index: 900;
position:relative;
}
#particles-js {
background-color: #255;
z-index: 850;
position:relative;
}
JS:
window.addEventListener("hashchange", function() {
scrollBy(0, -55);
});
particlesJS("particles-js", {
particles: {
number: { value: 80, density: { enable: true, value_area: 800 } },
color: { value: "#ffffff" },
shape: {
type: "circle",
stroke: { width: 0, color: "#000000" },
polygon: { nb_sides: 5 },
image: { src: "img/github.svg", width: 100, height: 100 }
},
opacity: {
value: 0.5,
random: false,
anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
},
size: {
value: 3,
random: true,
anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 6,
direction: "none",
random: false,
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: 400, line_linked: { opacity: 1 } },
bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },
repulse: { distance: 100, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 }
}
},
retina_detect: true
});
var count_particles, stats, update;
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "absolute";
stats.domElement.style.left = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
count_particles = document.querySelector(".js-count-particles");
update = function() {
stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);
答案是ZohirSalak CeNa:
將畫布設置為此
position : absolute; width:100%; height:100%; z-index:-1;
position : absolute; width:100%; height:100%; z-index:-1;
我將為初學者澄清:在HTML中,動畫元素為<div id="particles-js"></div>
該元素應轉到背景。 注意id = element的值。
在CSS中,我只是添加了:
#particles-js {
position : absolute;
width:100%;
height:100%;
z-index:-1;
}
在#
后面注意與HTML文件中的id=
匹配的名稱( particles-js
)。
現在看起來像這樣:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.