javascript - 如何使用 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 标签)，它就不会显示在 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%。