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

Question

我正在使用 vue 3 particles js library in my vue3 project and so far it has been working but I am having issues displaying elements over it as I noticed it hides the elements inside it. I wish to achieve something like this 我怎样才能将这张 NASA 图像放在粒子上。已经检查了文档中的示例，但它使用的是 vanilla JS，我不确定如何在 vue 中实现。

Answer 1

您有两个选择：

如果你想要粒子全屏，你可以使用较低的 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" 值。

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

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

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

How to place elements on a Particle JS background in Vue JS 3

javascript

vue.js

particles.js

vuejs3