这问题我太熟了！核心原因一目了然——你的iframe虽然透明度设为0.5，但它的z-index: 1让它直接覆盖在按钮的上方。哪怕看起来是半透明的，鼠标点击事件还是会被上层的iframe拦截，根本触发不到下面的按钮。

另外先提个小细节：你代码里的style标签闭合位置错了（</style>写在了</head>外面），这可能导致样式解析出问题，记得先修正这个语法错误。

下面给你两种可行的解决办法：

方法1：把iframe放到页面下层 #

降低iframe的z-index值，让它跑到按钮等页面内容的下方，这样就不会遮挡点击事件了：

iframe {
  width: 1000px; /* 补充px单位，避免浏览器解析异常 */
  height: 1000px;
  position: absolute;
  top: 0;
  left: -20px;
  opacity: 0.5;
  z-index: -1; /* 将层级设为负数，让iframe在内容下层 */
}

方法2：让iframe忽略鼠标事件 #

给iframe添加pointer-events: none样式，这个属性会让iframe完全不响应任何鼠标交互，点击会直接穿透到下方的按钮：

iframe {
  width: 1000px;
  height: 1000px;
  position: absolute;
  top: 0;
  left: -20px;
  opacity: 0.5;
  z-index: 1;
  pointer-events: none; /* 忽略所有鼠标事件 */
}

选其中一种方法修改后，按钮的点击事件就能正常触发啦！

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