提问人：frogman 提问时间：11/17/2023 最后编辑：frogman 更新时间：11/17/2023 访问量：36
如何在我的 NextJS 项目中将 tsParticles 放在其余元素后面？
How to get tsParticles behind the rest of the elements in my NextJS project?
问：
首先，我将强调我不是 Web 开发人员，所以我可能会弄错整个设置。
使用当前的代码，粒子覆盖了所有其他元素，我想让它位于其余元素的后面，并且仅显示为背景。
import Image from 'next/image'
import{AiFillLinkedin, AiFillGithub} from 'react-icons/ai'
import deved from "../public/dev-ed-wave.png";
import code from "../public/code.png";
import design from "../public/design.png";
import ParticleBackground from './components/particle';
export default function Page() {
return (
<div>
<div>
<>
<ParticleBackground/>
</>
</div>
<head>
<title>Portfolio</title>
<meta name="description" content='Blank'></meta>
<link rel='icon' href='/icon.ico' type='image/x-icon'/>
</head>
<main className='bg-white px-10 dark:bg-black md:px-20 lg:px-40, z-2'>
<section className='min-h-screen'>
<nav className='py-10 mb-12 flex justify-between'>
<h1 className='text-xl'>madebye :)</h1>
<ul className='flex items-center'>
<li><a className='text-white px-4 py-2 rounded-md ml-8 border-solid border-2 border-purple-400' href=''>Resume</a></li>
</ul>
</nav>
<div className='text-center p-10'>
<h2 className='text-5xl py-2 text-purple-400 font-medium'>Evan Quah</h2>
<h3 className='text-2xl py-2'>
System Administrator and Security Student
</h3>
<p className='text-medium py-5 leading-8 md:text-xl max-w-xl mx-auto'>
blah blah blah fix later
</p>
</div>
<div className='text-5xl flex justify-center gap-16 py-3'>
<a href=''>
<AiFillGithub />
</a>
<a href=''>
<AiFillLinkedin />
</a>
</div>
<div className='derrelative mx-auto bg-gradient-to-b from text-teal-500 rounded-full w-80 h-80 mt-20 overflow-hidden md:h-96 md:w-96'>
<Image src={deved} />
</div>
</section>
<section>
<div>
<h3 className='text-3xl py-1'>Who I am</h3>
<p className='text-medium py-5 leading-8'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div className='lg: gap-10'>
<div className='text-center shadow-lg p-10 rounded-xl my-10 border-solid border-2 border-purple-400'>
<div className='flex justify-center items-center'>
<Image src={design} width={100} height={100} />
</div>
<h3 className='text-lg font-medium pt-8 pb-2'>
Home Lab
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<h4 className='py-4 text-purple-400'> Tools I use</h4>
<p className='text-gray-200 py-1'>Linux</p>
<p className='text-gray-200 py-1'>Docker</p>
<p className='text-gray-200 py-1'>Azure</p>
</div>
<div className='lg: gap-10'>
<div className='text-center shadow-lg p-10 rounded-xl my-10 border-solid border-2 border-purple-400'>
<div className='flex justify-center items-center'>
<Image src={design} width={100} height={100} />
</div>
<h3 className='text-lg font-medium pt-8 pb-2'>
Things I make
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<h4 className='py-4 text-purple-400'> Tools I use</h4>
<p className='text-gray-200 py-1'>Nmap</p>
<p className='text-gray-200 py-1'>Wireshark</p>
<p className='text-gray-200 py-1'>Azure</p>
</div>
</div>
<div className='lg: gap-10'>
<div className='text-center shadow-lg p-10 rounded-xl my-10 border-solid border-2 border-purple-400'>
<div className='flex justify-center items-center'>
<Image src={design} width={100} height={100} />
</div>
<h3 className='text-lg font-medium pt-8 pb-2'>
Things I make
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<h4 className='py-4 text-purple-400'> Tools I use</h4>
<p className='text-gray-200 py-1'>Nmap</p>
<p className='text-gray-200 py-1'>Wireshark</p>
<p className='text-gray-200 py-1'>Azure</p>
</div>
</div>
</div>
</section>
<section>
<div>
<h3 className='text 3xl py-1'>Portfolio</h3>
<p className='text-medium py-5 leading-8'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<span className="text-purple-400"> agencies </span>
consulted for <span className="text-purple-400">startups </span>
and collaborated with talanted people to create digital products
for both business and consumer use.
</p>
</div>
</section>
</main>
</div>
)
}
这也是我的particle.jsx文件：
'use client'
import React from 'react';
import { useCallback } from 'react';
import { loadFull } from 'tsparticles';
import Particles from 'react-tsparticles';
const ParticleBackground = () => {
const particlesInit = useCallback(async (engine) => {
console.log(engine);
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
await loadFull(engine);
}, []);
const particlesLoaded = useCallback(async (container) => {
await console.log(container);
}, []);
return (
<div id='particle-background'>
<Particles
id='tsparticles'
particlesLoaded='particlesLoaded'
init={particlesInit}
loaded={particlesLoaded}
options={
{background: {
color: {
value: "#0d47a1",
},
},
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
move: {
direction: "none",
enable: true,
outModes: {
default: "bounce",
},
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
value: { min: 1, max: 5 },
},
},
detectRetina: true,
}}
height='100vh'
width='100vw'
z-index='1'
></Particles>
</div>
);
};
export default ParticleBackground;
我正在尝试获得一个在后台带有 tsParticles 的网站，而其余的网站元素在前面。现在我只能得到一个或另一个。如果我删除“ParticlesBackground”标签，那么网站的其余部分将显示，但如果我将其保留在其中，它将覆盖页面的其余部分。有人知道我该如何解决这个问题吗？我正在使用 NextJs 和 TailwindCSS。
更新：将相对类添加到外部 div 以建立定位上下文，并将 z-10 类应用于主元素以确保其具有高于 ParticleBackground 的 z 索引。
export default function Page() {
return (
<div className="relative">
<ParticleBackground />
<head>
<title>Portfolio</title>
<meta name="description" content="Blank"></meta>
<link rel="icon" href="/icon.ico" type="image/x-icon" />
</head>
<main className="md:px-20 lg:px-40 relative z-10">
答：
0赞
Beast80K
11/17/2023
#1
问题：
粒子覆盖了所有其他元素，我想把它放在其他元素后面，只显示为背景。
我正在尝试在后台使用 tsParticles，并在前面获得一个带有 tsParticles 的网站.....
原因：
ParticleBackrgound组件是直接放置的，它应该带子组件。在“选项”下，您还应该指定为 -1，因为哪些粒子将位于背景中。<Particles>zIndex
溶液：
更新组件中的代码：ParticleBackground
const ParticleBackground = () =>
自
const ParticleBackground = ({ children }) =>
然后
<div id='particle-background'>
<Particles>.... </Particles>
自
<div id='particle-background'>
<Particles/>
{children}
</div>
将此添加到选项中：在上面的背景键中：<Particles>
将此项从 ：
{background: {
color: {
value: "#0d47a1",
},
},
自
{
fullScreen:
{
enable: true,
zIndex: -1
},
background:
{
color: {
value: "#0d47a1",
},
},
同样在您的主页中：
更改此项：
<div>
<>
<ParticleBackground/>
</>
</div>
到（把它放在头标签下面）
<ParticleBackground>
<main> </main>
</ParticleBackground>
将 main 标签放在 component 中。现在，您将不需要该相对类。
请阅读：
- 班级选项 ： https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_Options.Options.html
- 全屏类：https://particles.js.org/docs/classes/tsParticles_Engine.Options_Classes_FullScreen_FullScreen.FullScreen.html
如果您还有任何疑问，请发表评论
评论