如何解决Particles.js 背景未调整
当我为 Particles.js 调整我的配置时,背景颜色/图像并没有改变。我不确定我做错了什么。这是我的代码:
HTML:
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="js/app.js"></script>
<script>
particlesJS.load('particles-js','particles.json',function(){
console.log('particles.json loaded...')
})
</script>
</div>
CSS:
head{
background-color: gray;
}
body{
background-color: gray;
}
Particles.json:
{
"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": 5,"random": true,"speed": 40,"size_min": 0.1,"line_linked": {
"enable": true,"distance": 150,"color": "#ffffff","opacity": 0.4,"width": 1
},"move": {
"enable": true,"speed": 6,"direction": "none","straight": false,"out_mode": "out","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": 200
},"push": {
"particles_nb": 4
},"remove": {
"particles_nb": 2
}
}
},"retina_detect": true,"config_demo": {
"hide_card": false,"background_color": "#646570","background_image": "https://images.unsplash.com/photo-1579546929662-711aa81148cf?ixlib=rb-1.2.1&ixid=MnwxMjA3fdb8MHxleHBsb3JlLWZlZWR8Mnx8fGVufdb8fHx8&w=1000&q=80","background_position": "50% 50%","background_repeat": "no-repeat","background_size": "cover"
}
}
我为背景尝试了各种十六进制代码,但没有将其从红色更改。我不确定它从哪里得到红色,但它是红色的...Background of website
解决方法
particlesJS("particles-js",{
"particles": {
"number": {
"value": 80,"density": {
"enable": true,"value_area": 800
}
},"color": {
"value": "#ff0000"
},"shape": {
"type": "circle","stroke": {
"width": 0,"color": "#000000"
},"polygon": {
"nb_sides": 5
},"image": {
"src": "img/github.svg","width": 100,"height": 100
}
},"opacity": {
"value": 1,"random": true,"anim": {
"enable": false,"speed": 1,"opacity_min": 0.1,"sync": false
}
},"size": {
"value": 3,"speed": 40,"size_min": 0.1,"line_linked": {
"enable": true,"distance": 150,"color": "#104723","opacity": 0.4,"width": 1
},"move": {
"enable": true,"speed": 5,"direction": "none","random": false,"straight": false,"out_mode": "out","bounce": false,"attract": {
"enable": false,"rotateX": 600,"rotateY": 1200
}
}
},"interactivity": {
"detect_on": "window","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": 200,"duration": 0.4
},"push": {
"particles_nb": 4
},"remove": {
"particles_nb": 2
}
}
},"retina_detect": true
});
#particles-js{
position:absolute;
width: 100%;
height: 100%;
z-index:-1;
background-color: #ffffff;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
我注意到的两件事。您没有在 HTML 中指定 js-particles div。您有一个没有初始 div 标签的结束 div 标签。在 <body>
标记之前,创建一个
<div id="particles-js"></div>
然后你可以像在我的代码片段中一样改变你的 CSS,以及在脚本标签内的粒子函数中使用 JSON,而不是导入 JSON 文件
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。