图像上的 HTML 文本，同时保持背景图像的可点击性

Question

在我的网站上，我有一个“隐藏”的 background 按钮(它与 background 融为一体，但实际上是一个 button ) 并且它工作正常，直到我编辑了带有文本的页面。

在某些显示器上，文本会覆盖图像，但不会完全覆盖 - 在图像下方和旁边有空间可以窥 View 像。

但是，这会使图像与文本重叠，从而打破了幻觉。将 z-index 设置为 -1 使其位于文本后面，但无法点击。

有什么方法可以让文本后面的内容在停留在文本后面的同时可以点击吗？

列之间的“眼睛”是隐藏的图像。

图像的当前代码:

<a href= "/aboutme/vision.html">
  <img style="position:absolute; top:354px; left:975px; width:108px; height:32px; z-index:-1" src="eye.png">
</a>

Answer 1

我重新安排了网站布局以使用可点击的 div 而不是图像，现在它可以在点击时工作，即使文本位于其上。然后我把它放在一个嵌套的 div 中，它是整个窗口的大小，因此链接永远不会根据窗口大小而错位:

HTML:

<div id="bodyDiv">
   <div class="secret" style="position:relative; top:770px; left:1168px; width:108px; height:32px; background-color:black;" onclick="location.href='/aboutme/vision.html'"></div>
</div>

CSS:

#bodyDiv {
        background-image: url("homebackgroundsmall.png");
        background-repeat: no-repeat;
        background-position: center;
        height: 1200px;
        width: 1684px;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -842px;
      }

这样做的缺点是鼠标悬停时没有变化，这使得 secret 被过度隐藏。为了亲自修复此问题以使其更加明显，我制作了 .secret 类，因此通过将背景不透明度增加到 1(黑色)，悬停 div 的背景部分淡出:

CSS:

.secret {
        opacity: 0;
        transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -webkit-transition: opacity 1s ease-in-out;
      }
.secret:hover {
        opacity: 1;
      }