如何在 Vue JS 3 中的 Particle JS 背景上放置元素

问题描述

我在我的 vue3 项目中使用了 vue 3 particles js library，到目前为止它一直在工作，但是我在它上面显示元素时遇到了问题，因为我注意到它隐藏了其中的元素。我希望实现这样的目标

我怎样才能将这张 NASA 图像放在粒子上。已经检查了文档中的示例，但它使用的是 vanilla JS，我不确定如何在 vue 中实现。

解决方法

您有两个选择：

如果您希望粒子全屏显示，您可以使用较低的 z index 启用全屏选项，如下所示：

{
   "fullScreen": {
      "enable": true,"zIndex": -1 // -1 is behind the body,so if you have a background you have to use 0 or a different value
   }
}

或者您可以针对粒子 ID（例如 tsparticles）设置自定义 CSS，手动设置较低的 z-index。

如果粒子在元素后面，当鼠标悬停在另一个元素上时它们不会相互作用，所以我建议将 interactivity.detectsOn 设置为 "window" 值。

设置此值会使粒子直接对鼠标事件无响应，因为它们是从窗口本身触发的，因此您可以在顶部放置粒子并使网站仍然可用。

您可以在此处查看示例：https://codepen.io/matteobruni/pen/abdpbBY