大家晚上好， 我在我的网站上添加了五彩纸屑落下的动画。 五彩纸屑叠加在我的按钮上，我无法单击它们，如何使五彩纸屑可见但透明，以便单击下面的内容？

这是我使用的代码:

顺晟科技：

可以使用CSS属性控制指针与元素交互方式的某些方面。设置会让指针事件（如悬停和单击）直接通过一个元素，就好像它不在那里一样。以下是一些文档:pointer-events

我希望这能有所帮助:

index.html

<canvas id="my-canvas"></canvas>

<script src="assets/index.min.js"></script>
<script> var confettiSettings = { target: 'my-canvas' };
var confetti = new ConfettiGenerator(confettiSettings);
confetti.render();
</script>

<style>
#my-canvas
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100000;
    
}


</style>

index.css

<canvas id="my-canvas"></canvas>

<script src="assets/index.min.js"></script>
<script> var confettiSettings = { target: 'my-canvas' };
var confetti = new ConfettiGenerator(confettiSettings);
confetti.render();
</script>

<style>
#my-canvas
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100000;
    
}


</style>

脚本文件

<canvas id="my-canvas"></canvas>

<script src="assets/index.min.js"></script>
<script> var confettiSettings = { target: 'my-canvas' };
var confetti = new ConfettiGenerator(confettiSettings);
confetti.render();
</script>

<style>
#my-canvas
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100000;
    
}


</style>

以下是codepen.io的链接:https://codepen.io/jacobgunnarsson/pen/pbpwga