如何用JavaScript实现Canvas矩阵背景并解决上层元素渲染异常？

问题根源 #

• CSS选择器错误：body .canvas #background_canvas 无法匹配目标Canvas元素，导致z-index: -1不生效，背景Canvas与前景元素层级混乱，出现文字覆盖图片、前景元素被淡出效果影响的问题。
• 前景容器未设置合适定位，无法确保其始终处于背景Canvas之上。

修复方案 #

1. 修正CSS样式 #

调整选择器与定位规则，确保背景Canvas处于底层，前景元素层级正确：

html {
  background: black;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#background_canvas {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  display: block;
  height: 100%;
  width: 100%;
  z-index: -1; /* 固定Canvas在最底层 */
}

#foreground {
  position: relative; /* 确保前景容器在背景之上 */
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#foreground img {
  /* 按需设置图片样式，示例为圆形头像 */
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

2. 优化HTML结构（可选） #

调整脚本位置避免渲染阻塞，让结构更清晰：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Matrix Background</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <canvas id="background_canvas">Cannot Render Canvas</canvas>
  <div id="foreground">
    <canvas id="foreground_canvas"></canvas>
    <img src="assets/images/pfp.png" alt="My Profile Picture">
  </div>

  <script src="assets/js/background.js" type="module"></script>
  <script src="assets/js/app.js" type="module"></script>
</body>
</html>

3. 保留原有JS逻辑 #

原矩阵效果的JavaScript代码无需修改，问题核心在CSS层级而非绘制逻辑。

效果说明 #

• 背景Canvas通过z-index: -1固定在页面最底层，不会覆盖前景内容。
• 前景容器设置position: relative和z-index: 1，确保图片、前景Canvas始终在背景之上，不受背景半透明淡出效果影响。

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