0

我从 3D 库react-particles-webgl制作了一个组件。我怎样才能把它作为我网页的背景。网页由表单输入元素组成。

import React from 'react';
import Input from './components/Input';
import Navbar from './components/Navbar';
import BackGround from './components/BackGround';

function App() {
  return (
    <div className="App">
      <BackGround />
       <div className="conatiner">
         <Navbar />
         <Input />
      </ div>
    </div>
  );
}

export default App;

在上面的代码中，BackGround 是组件。这里我附上了背景组件的代码。

import React from "react";
import ParticleField from "react-particles-webgl";

function BackGround() {
 
  const config = {
    showCube: false,
    dimension: "2D",
    velocity: 2.5,
    boundaryType: "bounce",
    antialias: true,
    direction: {
      xMin: -1,
      xMax: 1,
      yMin: -1,
      yMax: 1,
      zMin: -1,
      zMax: 1
    },
    lines: {
      colorMode: "solid",
      color: "#3FB568",
      transparency: 0.9,
      limitConnections: true,
      maxConnections: 20,
      minDistance: 60,
      visible: true
    },
    particles: {
      colorMode: "solid",
      color: "#3FB568",
      transparency: 0.9,
      shape: "circle",
      boundingBox: "canvas",
      count: 300,
      minSize: 20,
      maxSize: 50,
      visible: true
    },
    cameraControls: {
      enabled: false,
      enableDamping: true,
      dampingFactor: 0.2,
      enableZoom: true,
      autoRotate: false,
      autoRotateSpeed: 0.3,
      resetCameraFlag: true
    }
  };

  return (
    <div className="background">
      <ParticleField config={config} />
    </div>
  );
}

export default BackGround;

我用于该组件的CSS是-

.BackGround{
  position: absolute;
  height: 100vh;
  width: 100vw;
  z-index: -1;
}

4

1 回答 1

0

您不需要用背景组件包装您的应用程序 - 在其他组件之前渲染它，并使用 css 将画布设置为背景。我猜在绝对位置，然后是 100vw 和 100vh 来填满屏幕。最后设置 z-index 以使其保持在所有内容的后面。

import React from 'react';
import Input from './components/Input';
import Navbar from './components/Navbar';
import BackGround from './components/BackGround';

function App() {
  return (
    <div className="App">
      <BackGround />
      <Navbar />
      <Input />
    </div>
  );
}

export default App;

于 2020-07-11T16:41:01.123 回答