如何在 react-tsparticles 中更改粒子背景的颜色、背景和高度？

Question

如何在 react-tparticles 中更改颜色和背景？这是我的粒子-config.js

  const particlesConfig = {
  background: {
    color: {
      value: "#232741",
    },

    position: "50% 50%",
    repeat: "no-repeat",
    size: "20%",
  },
  fullScreen: {
    zIndex: 1,
  },
  interactivity: {
    events: {
      onClick: {
        enable: true,
        mode: "repulse",
      },
      onHover: {
        enable: true,
        mode: "bubble",
      },
    },
    modes: {
      bubble: {
        distance: 250,
        duration: 2,
        opacity: 0,
        size: 0,
      },
      grab: {
        distance: 400,
      },
      repulse: {
        distance: 400,
      },
    },
  },
  particles: {
    color: {
      value: "#ffffff",
    },
    links: {
      color: {
        value: "#ffffff",
      },
      distance: 150,
      opacity: 0.4,
    },
    move: {
      attract: {
        rotate: {
          x: 600,
          y: 600,
        },
      },
      enable: true,
      outModes: {
        bottom: "out",
        left: "out",
        right: "out",
        top: "out",
      },
      random: true,
      speed: 1,
    },
    number: {
      density: {
        enable: true,
      },
      value: 160,
    },
    opacity: {
      random: {
        enable: true,
      },
      value: {
        min: 0,
        max: 1,
      },
      animation: {
        enable: true,
        speed: 1,
        minimumValue: 0,
      },
    },
    size: {
      random: {
        enable: true,
      },
      value: {
        min: 1,
        max: 3,
      },
      animation: {
        speed: 4,
        minimumValue: 0.3,
      },
    },
  },
};
export default particlesConfig;

dummy data"但是为了让你明白所有这些天生的错误来自于那些指责快乐和赞美痛苦的人，我会公开整个事情，而那些非常我将解释那个真理的发现者和幸福生活的建筑师所说的话。因为没有人轻视、憎恨或逃避快乐本身，因为它是快乐，而是因为巨大的痛苦伴随着那些不知道的人如何以理性追随快乐。也没有人喜爱痛苦本身，因为它是痛苦，追求它，想要获得它，而是因为它从来没有。有时他会通过劳动和痛苦来寻求某种巨大的快乐。为了来在最小的细节上，我们中间有谁会进行任何费力的体育锻炼，除非是为了从中获得一些好处？或者谁会避免没有快乐的痛苦？

Answer 1

要更改粒子和背景颜色，您需要在配置中分别调整以下值（使用十六进制代码颜色）。我还包括 links（点之间的那些），因为您还可以调整它们的颜色

particles: {
  color: {
    value: "#a13f23",
  },
  links: {
    color: "#098712",
  }
}
background: {
  color: {
    value: "#121",
  }
}

为了更改 canvas 组件的高度，您必须向选项对象添加另一个字段：

fullScreen: false

完成后，您必须定位 tsparticles id 并添加 height 属性，其值符合您的需要，示例如下：

#tsparticles {
  height: 100px
}

这里 Sandbox 进行测试。

如何在 react-tsparticles 中更改粒子背景的颜色、背景和高度？

How to change color , background and height of the particle background in react-tsparticles?

javascript

reactjs

react-particles-js