如何将canvas粒子效果设为页面背景且保留原有交互功能

实现方案 #

核心逻辑是通过CSS层叠上下文将粒子容器固定在页面最底层，不影响上层内容的正常交互，同时100%保留粒子本身的交互功能，不需要修改原有粒子的JS逻辑。

方案1：基础CSS定位调整（无侵入，改造成本最低） #

调整后的CSS代码

html {
  height: 100%;
}
body {
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  /* 移除原有overflow:hidden属性，避免页面内容超出时无法滚动 */
}
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -999; /* 将粒子容器放到所有内容的最底层 */
}
/* 原有页面内容统一放到这个类的容器内，保证显示在粒子上层 */
.page-content {
  position: relative;
  z-index: 1;
}

调整后的HTML结构

<html>
    <head>
        <link rel="stylesheet" href="css.css">
    </head>
    <body>
        <div id="particle-canvas"></div>
        <!-- 原有页面的所有内容放到下方容器内 -->
        <div class="page-content">
            <!-- 这里放你原来的页面文本、按钮、图片等所有元素 -->
        </div>
        <script type="text/javascript" src="particle.min.js"></script>
        <script type="text/javascript">
            var options = {
                particleColor: '#fff',
                background: '#1a252f',
                interactive: true,
                speed: 'fast',
                density: 'medium'
            };
            var particleCanvas = new ParticleNetwork(document.getElementById('particle-canvas'), options);
        </script>
    </body>
</html>

如果需要粒子跟随页面滚动而非固定在视口，把#particle-canvas的position: fixed改为position: absolute即可。

方案2：交互异常适配 #

如果调整后出现上层页面元素无法点击的问题，可新增pointer-events属性做兼容：

#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -999;
  pointer-events: none; /* 容器本身不拦截任何点击事件 */
}
#particle-canvas canvas {
  pointer-events: auto; /* 仅保留粒子canvas本身的交互能力 */
}

注意事项 #

• 不需要额外给body设置背景色，避免和粒子自带的背景色重叠
• 上层内容的z-index只要大于粒子容器的z-index即可正常显示，无需设置过大的数值
• 页面内容高度较高需要滚动时，粒子效果会始终固定在视口底部，不会跟随滚动消失

内容的提问来源于stack exchange，提问作者user17423409