Question

我正在使用我的某些组件上的ParticlesJS开发一个React应用程序。对于我的组件之一，我正在运行“粒子”，并想在背景顶部添加一些文本。我尝试添加它，但文本未显示。

我添加了我的组件和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 。但是我的幸运猜测是 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之上

2 个答案: