Reactを学習していて、React-Particles-Js（https://www.npmjs.com/package/react-particles-js）を自分のWebサイトの背景に設定する際に問題が発生しています。
レンダリングするだけなら
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;
画面の左上隅に「HelloWorld」が3回表示され、その下にパーティクルが表示されます。つまり、パーティクルは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;
そして、これが私が見ているものです。ここに画像の説明を入力してください。ご覧のとおり、粒子とタグは相互に排他的であると解釈されているようです。
（PS、html.indexのbodyタグを背景色＃e74c3cに設定しました。これは、背景として表示される赤みがかった色です）
これを修正する方法について何かアドバイスはありますか？
私はパーティクルに同じライブラリを使用しています。これが私のキャンバスCSSで、あなたが望むように機能します。
#particle-canvas {
position:fixed !important;
left:0;
top:0;
width:100%;
height:100%;
}
要素の位置を修正し、画面の左上に設定し、両方の次元で100％に設定します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加