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

【问题标题】：How to place elements on a Particle JS background in Vue JS 3如何在 Vue JS 3 中的 Particle JS 背景上放置元素
【发布时间】：2021-07-27 16:29:27
【问题描述】：

我在我的 vue3 项目中使用 vue 3 particles js library，到目前为止它一直在工作，但是我在显示元素时遇到了问题，因为我注意到它隐藏了其中的元素。我希望实现这样的目标我怎样才能将这张 NASA 图像放在粒子上。已经检查了文档中的示例，但它使用 vanilla JS，我不确定如何在 vue 中实现。

【问题讨论】：

标签： javascript vue.js vuejs3 particles.js

【解决方案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
   }
}

或者你可以设置一个自定义 CSS 来定位粒子 id（例如tsparticles），手动设置一个较低的z-index。

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

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

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

【讨论】：

非常感谢@Caelan ..你在这里让我头疼