如何将 <h1> 元素放在 ParticlesJS 之上

Question

我正在开发一个 React 应用程序，在我的一些组件上使用 ParticlesJS。对于我的组件之一，我有 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 组件未渲染任何子组件，而仅渲染 canvas。同样在页面 DOM 中，不应包含 h1 标记。

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

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

和

.container {
   position: relative;
}

Answer 2

尝试在文本中添加一些 z-index。但我的幸运猜测是 Particles 不支持子组件。相反，将粒子和文本放在一些包装器中 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。

如何将 <h1> 元素放在 ParticlesJS 之上

How to put <h1> element on top of ParticlesJS

reactjs

particles.js