放置在背景图片上的按钮显示正常但无法点击（附HTML/CSS代码）

算力阿峰

2026-8-30

按钮无法点击的核心原因

.bg-img被设置为position: absolute后脱离普通文档流，默认堆叠层级高于未设置定位属性（默认值为static）的表单按钮。虽然图片设置了45%透明度，可以在视觉上透出下层的按钮，但实际透明图片层完全覆盖在按钮上方，拦截了所有鼠标点击事件，导致按钮无法触发跳转。

修复方案

二选一即可，优先推荐第一种写法，更符合前端语义规范：

方案1（推荐）：不要用独立的<img>标签实现背景，直接将背景图设置为父容器的背景属性，从根源避免层级遮挡问题。
删掉现有<img class="bg-img">标签，给承载背景的父级元素（比如页面最外层容器、对应内容区块）添加如下样式：
```
.page-wrap {
  width: 99.3vw;
  min-height: 850px;
  /* 替换为你自己的背景图链接 */
  background: url(你的背景图地址) center/cover no-repeat;
  opacity: 0.45;
  position: relative;
}
```
这种写法下，容器内的按钮、文字等内容天生处于背景层上方，不需要额外调整层级就能正常响应点击。

方案2（保留现有img标签写法，调整堆叠层级）：注意z-index属性仅对非static定位的元素生效，需要给背景图设置低层级，给可交互内容设置高层级，修改后的CSS如下：

.bg-img {
  width: 99.3vw;
  opacity: 45%;
  position: absolute;
  z-index: 1; /* 背景层级设为最低 */
  clip: rect(0, 100vw, 650px, 0px);
  height: 850px;
}

.learn {
  position: relative; /* 触发z-index生效条件 */
  z-index: 10; /* 层级设置为高于背景图 */
  margin-left: 550px;
  margin-top: 520px;
  height: 30px;
  width: 120px;
  font-size: 15px;
}

#project {
  position: relative;
  z-index: 10;
  margin-top: 600px;
}