如何在React上工作时将React -particles-js设置为背景

Question

我正在用React.js做一个投资组合，我使用react-particles-js作为我的背景，但它作为一个组件工作。
我想要这个组件作为背景。
是否有其他替代的反应粒子-js?

这是我的Home.js

import Particle from "../Particle";
import Pro from '../../Assets/Pro.svg'
import { Container, Row, Col } from "react-bootstrap";
function Home() {
return (
<section>
<Container fluid className='home-section'>
<Particle />
<Container className='home-content'>
<Row>
<Col md={5} >
<img src={Pro} alt="home pic" className="img-fluid" />
</Col>
</Row>
</Container>
</Container>
</section>
);
}
export default Home;

Answer 1

你可以使用选项设置粒子作为背景。不需要额外的CSS

您可以在这里看到fullScreen选项:https://particles.js.org/docs/interfaces/Options_Interfaces_FullScreen_IFullScreen.IFullScreen.html

所以，你唯一需要做的就是把这个添加到你的粒子配置中:

{
fullScreen: {
enable: true,
zIndex: 0 // or any value is good for you, if you use -1 set `interactivity.detectsOn` to `"window"` if you need mouse interactions
},
/* your config */
}

您可以在这里看到一个工作示例:https://codesandbox.io/s/react-tsparticles-dw43f?file=/src/App.js:190-230

它使用react-tsparticles，但它与react-particles-js@3相同。如果你不使用这些，上面的设置将不起作用。