如何使用 React 将 React-Particles-Js 设置为后台？

Question

我正在学习 React，在将 React-Particles-Js (https://www.npmjs.com/package/react-particles-js) 设置为我网站的背景时遇到了一些问题。

如果我只渲染

  class App extends Component {
  render() {
    return (
      <div>
      <Particles />
      </div>

    );
  }
}

我得到了我想要的背景。但是，一旦我渲染其他任何东西（例如 h1 标签），它就不会显示 on react-particles-js，可以这么说，而是移动 react-particles- js并单独显示。

例如，如果我渲染

 class App extends Component {
      render() {
        return (
          <div>
          <h1>Hello World</h1>
          <h1>Hello World</h1>
          <h1>Hello World</h1>
          <Particles />


          </div>


        );
      }
    }

    export default App;

发生的事情是 "Hello World" 在屏幕的左上角显示了三次，而 Particles 显示在其下方，这意味着 Particles 被解释为与 h1 (就好像它是另一个 h1 标签）而不是作为所有元素的背景元素——无论它们是 h1 标签、卡片、导航还是其他任何东西——这正是我想要的！

这是我的Particles.js

import React, { Component } from 'react';
import Particles from 'react-particles-js';

var style = {
    width: "100vw",
    height: "100vh",
};


class ParticlesBackground extends Component {

    render() {
        return (
            <div style={style}>
            <Particles
                params={{
                    "particles": {
                    "number": {
                    "value": 90
                    },
                    "size": {
                    "value": 2.5
                    }
                },
                    "interactivity": {
                    "events": {
                    "onhover": {
                    "enable": true,
                    "mode": "repulse"
                    }
                    }
                    }
                }}/>
            </div>
            )
    }
}

export default ParticlesBackground;

这是我的App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Nav from './Nav'
import MainArea from './MainArea';
import Particles from './Particles';
import PeopleCard from './PeopleCard'





class App extends Component {
  render() {
    return (
      <div>
      <h1>Hello World</h1>
      <h1>Hello World</h1>
      <h1>Hello World</h1>
      <Particles />


      </div>


    );
  }
}

export default App;

这就是我看到的 enter image description here 如您所见，粒子和标签似乎被解释为相互排斥。

（PS，我在我的 html.index 中设置 body 标签的背景颜色为#e74c3c，也就是你看到的红色背景）

关于如何解决这个问题有什么建议吗？

Answer 1

我对粒子使用相同的库，这是我的 canvas css，它的工作方式与您想要的一样：

#particle-canvas {
    position:fixed !important;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

固定元素位置并将其设置在屏幕的左上角，在两个维度上都设置为 100%。

Answer 2

希望对您有所帮助

import Particles from 'react-particles-js';
  class App extends Component {
  render() {
    return (
      <div className="App">

         <Particles className="particles"
         params={particlesOptions}/>
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%"
          }}
        >
        <Header Data={Data}/>
      </div>
      </div>
    );
  }
}

export default App;

如何使用 React 将 React-Particles-Js 设置为后台？

How to set React-Particles-Js to background using React?

html

javascript

css

reactjs

particles.js