如何启用 Particles-js 内容背后的交互？

如何解决如何启用 Particles-js 内容背后的交互？

我在我的标题中使用了 Particles-js 库，它很酷，但问题是我放在 #Particle-js 内的文本内容后面没有与鼠标相关的交互（放在边框内更好感知），这意味着您无法在放入的内容区域上移动或生成粒子！有什么方法可以修复它并使交互在整个 #Particle-js 上可用？

<!doctype html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <Meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        #particles-js {
            height: 100vh;
            max-width: 100%;
            overflow: hidden;
            position: relative;
        }
        #particles-js .content {
            margin-bottom: 100px;
        }
    </style>
</head>
<body>
<header id="particles-js" class="bg-dark d-flex align-items-center">

    <div class="container content d-flex flex-wrap flex-column justify-content-center align-items-center position-absolute">


        <div class="p-5 mb-5 w-100 border" id="iAm">
            <span class="fill d-block">Hi,<br>I'm
            <span class="firstLetter">D</span>orothy
            <a href="#" class="">Contact me!</a>
        </div>
    </div>
</header>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
// There were no CDNs for the two scripts below,they are so light you can download the zip file from https://vincentgarreau.com/particles.js/
<script src="particles.js-master/particles.js"></script>
<script src="particles.js-master/demo/js/app.js"></script>
</body>
</html>