时间戳

首页 > 解决方案 > 如何在 Vue JS 3 中的 Particle JS 背景上放置元素

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

问题描述

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

标签： javascriptvue.jsvuejs3particles.js

解决方案

你有两个选择：

如果你想要粒子全屏，你可以启用全屏选项，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
   }
}

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

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

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

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

推荐阅读