Canvas动画背景导致CSS hover失效及尺寸异常问题求助

问题1：导航栏hover属性失效 #

• 核心原因：Canvas/WebGL背景元素层级高于导航栏，hover事件被背景元素拦截
• 修复方案：给导航栏容器添加z-index属性，同时确保导航栏设置了position属性（relative/absolute均可）来激活z-index：

.navbar {
  position: relative;
  z-index: 10; /* 数值需大于背景元素的z-index，通常背景设为0或-1即可 */
}

• 额外优化：给Canvas/WebGL元素设置z-index: -1，彻底避免层级冲突

问题2：背景尺寸超出视口 #

• 常见成因：
  • Canvas元素自带浏览器默认的margin/padding
  • 未给背景元素设置严格的视口约束
• 修复方案：
  1. 重置body的默认边距，防止整体布局偏移：

  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 消除横向滚动条 */
  }
  

  2. 给Canvas/WebGL元素设置固定定位，强制铺满视口且不溢出：

  canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* 保持渲染比例，避免拉伸变形 */
    z-index: -1; /* 置于页面内容下方 */
  }
  

• 注意：如果使用WebGL渲染，需确保JS中获取的画布分辨率与CSS设置的显示尺寸一致，避免渲染内容拉伸或溢出

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