reactjs - 怎么放

Question

我正在我的一些组件上使用 ParticlesJS 开发一个 React 应用程序。对于我的一个组件，我正在运行 Particles，并且想在背景上添加一些文本。我尝试添加它，但没有显示文本。

我添加了我的组件和 CSS 代码。

render() {
        return (
            <>
                <Particles
                params={{
                    "particles": {
                        "number": {
                        "value": 300,
                        },
                        "color": {
                            "value": "#000000"
                        },
                        "line_linked": {
                            "color": "#000000"
                        },
                        "stroke": {
                            "width": 0,
                            "color": "#000000"
                        },
                        "size": {
                            "value": 3
                        }
                    },
                    "interactivity": {
                        "events": {
                            "onhover": {
                                "enable": true,
                                "mode": "repulse"
                            }
                        }
                    },
                    "retina_detect": false
                }} >

                <div class="text">

                    <h1>This is a test</h1>

                </div>


                </Particles>

              </>
        );
      }

.text{
    background-color: black;
    color: black;
    position: absolute;
    text-align: center;
    top: 40%;
    width: 100%;
}

我希望文本显示在粒子背景之上。

Answer 1

我猜你正在使用react-particles-js. 查看代码时，Particles组件不渲染任何子元素，而只渲染画布。同样在页面 DOM 中h1不应包含标签。

所以你必须将你的粒子和你的文本包装在另一个组件中：

<div class="container">
   <Particles .../>
   <div class="text">
       <h1>This is a test</h1>
   </div>
</div>

和

.container {
   position: relative;
}

Answer 2

尝试在文本中添加一些z-index 。但我的幸运猜测是粒子不支持子组件。相反，将粒子和文本放在一些包装 div 中，如下所示：

<div className="wrapper">
    <Particles />
    <div className="text">
        <h1>This is a test</h1>
    </div>
</div>

并使用与此类似的 CSS：

.wrapper {
    position: relative;
}

.text{
    background-color: black;
    color: black;
    position: absolute;
    text-align: center;
    top: 40%;
    width: 100%;
}

如果您再次遇到一些问题，请将z-index添加到文本中，并检查控制台工具中的粒子是否有一些 z-index。