Javascript 使用粒子插件和背景图像

我使用粒子插件的背景与背景图像。背景图像应该是模糊的。但问题是图像中的粒子也变得模糊了

我的代码如下：

/*--particles.js配置--*/
particlesJS（“particlesJS”{
“粒子”：{
“编号”：{
“价值”：30，
“密度”：{
“启用”：正确，
“价值区”：320
}
},
“颜色”：{
“值”：“#ffffff”
},
“形状”：{
“类型”：“圆圈”，
“笔划”：{
“宽度”：0，
“颜色”：“000000”
},
“多边形”：{
“nb_边”：5
},
“图像”：{
“src”：“img/github.svg”，
“宽度”：100，
“高度”：100
}
},
“不透明度”：{
“值”：0.5，
“随机”：假，
“动画”：{
“enable”：false，
“速度”：1，
“不透明度最小值”：0.1，
“同步”：错误
}
},
“尺寸”：{
“价值”：2，
“随机”：对，
“动画”：{
“enable”：false，
“速度”：25，
“最小尺寸”：0.1，
“同步”：错误
}
},
“行链接”：{
“启用”：正确，
“距离”：150，
“颜色”：“ffffff”，
“不透明度”：0.4，
“宽度”：1
},
“移动”：{
“启用”：正确，
“速度”：6，
“方向”：“无”，
“随机”：假，
“直”：假，
“输出模式”：“输出”，
“反弹”：错误，
“吸引”：{
“enable”：false，
“rotateX”：600，
“rotateY”：1200
}
}
},
“互动性”：{
“在画布上检测”：“画布”，
“事件”：{
“悬停”：{
“启用”：正确，
“模式”：“抓取”
},
“onclick”：{
“启用”：正确，
“模式”：“推送”
},
“调整大小”：true
},
“模式”：{
“抓取”：{
“距离”：140，
“行链接”：{
“不透明度”：1
}
},
“泡沫”：{
“距离”：400，
“尺寸”：40，
“期限”：2，
“不透明度”：8，
“速度”：3
},
“拒绝”：{
“距离”：200，
“持续时间”：0.4
},
“推送”：{
“粒子”：4
},
“删除”：{
“粒子”：2
}
}
},
“视网膜检测”：正确
});
/*----stats.js配置---*/

画布{
显示：块；
垂直对齐：底部对齐；
}
/*----particles.js容器--*/
#粒子js{
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：#fff；
背景图像：url（“https://blackshellmedia.com/wp-content/uploads/2015/03/Commercial-Buildings.jpg");
背景滤镜：模糊（5px）；
背景重复：无重复；
背景尺寸：封面；
背景位置：50%50%；
-webkit过滤器：模糊（4px）；
-moz滤波器：模糊（4px）；
-o-滤波器：模糊（4px）；
-ms过滤器：模糊（4px）；
过滤器：模糊（4px）；
}

---

只需将图像移到外部，并使用伪元素（例如）创建一个单独的层：

/*--particles.js配置--*/
particlesJS（“particlesJS”{
“粒子”：{
“编号”：{
“价值”：30，
“密度”：{
“启用”：正确，
“价值区”：320
}
},
“颜色”：{
“值”：“#ffffff”
},
“形状”：{
“类型”：“圆圈”，
“笔划”：{
“宽度”：0，
“颜色”：“000000”
},
“多边形”：{
“nb_边”：5
},
“图像”：{
“src”：“img/github.svg”，
“宽度”：100，
“高度”：100
}
},
“不透明度”：{
“值”：0.5，
“随机”：假，
“动画”：{
“enable”：false，
“速度”：1，
“不透明度最小值”：0.1，
“同步”：错误
}
},
“尺寸”：{
“价值”：2，
“随机”：对，
“动画”：{
“enable”：false，
“速度”：25，
“最小尺寸”：0.1，
“同步”：错误
}
},
“行链接”：{
“启用”：正确，
“距离”：150，
“颜色”：“ffffff”，
“不透明度”：0.4，
“宽度”：1
},
“移动”：{
“启用”：正确，
“速度”：6，
“方向”：“无”，
“随机”：假，
“直”：假，
“输出模式”：“输出”，
“反弹”：错误，
“吸引”：{
“enable”：false，
“rotateX”：600，
“rotateY”：1200
}
}
},
“互动性”：{
“在画布上检测”：“画布”，
“事件”：{
“悬停”：{
“启用”：正确，
“模式”：“抓取”
},
“onclick”：{
“启用”：正确，
“模式”：“推送”
},
“调整大小”：true
},
“模式”：{
“抓取”：{
“距离”：140，
“行链接”：{
“不透明度”：1
}
},
“泡沫”：{
“距离”：400，
“尺寸”：40，
“期限”：2，
“不透明度”：8，
“速度”：3
},
“拒绝”：{
“距离”：200，
“持续时间”：0.4
},
“推送”：{
“粒子”：4
},
“删除”：{
“粒子”：2
}
}
},
“视网膜检测”：正确
});
/*----stats.js配置---*/

画布{
显示：块；
垂直对齐：底部对齐；
}
/*----particles.js容器--*/
#粒子js{
位置：绝对位置；
宽度：100%；
身高：100%；
}
#粒子js：以前{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景图像：url（“https://blackshellmedia.com/wp-content/uploads/2015/03/Commercial-Buildings.jpg");
背景重复：无重复；
背景尺寸：封面；
背景位置：50%50%；
-webkit过滤器：模糊（4px）；
-moz滤波器：模糊（4px）；
-o-滤波器：模糊（4px）；
-ms过滤器：模糊（4px）；
过滤器：模糊（4px）；
}

您可以使用模糊背景图像，因此无需添加模糊filter@Ezzuddin是的，我可以用。但我不希望我的客户每次更新横幅时都使用模糊图像。