如何将透明导航栏覆盖在英雄图像上，并在英雄图像上有一个正常工作的按钮？

<div class="hero-container">
  <nav class="transparent-navbar">
    <!-- 导航栏内容 -->
  </nav>
  <img src="hero-image.jpg" alt="Hero Image">
  <button class="hero-button">按钮</button>
</div>

.hero-container {
  position: relative;
}

.transparent-navbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent; /* 或者使用 opacity: 0; */
  z-index: 2;
}

img {
  width: 100%;
  height: auto;
}

.hero-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

document.querySelector('.hero-button').addEventListener('click', function() {
  // 按钮点击事件处理程序
});