Question

我已经从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;
}

Answer 1

您不需要使用背景组件包装您的应用程序-在其他组件之前渲染它，并使用CSS将画布设置为背景样式。我猜在绝对的位置，然后100vw和100vh填充屏幕。最后设置z-index以使其紧随一切。

function<bool(int)>

如何在React中将页面用作背景

1 个答案: