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

Question

在我的网站上，我有一个 background 按钮，它是 "hidden"（它与 background 混合在一起，但实际上是一个 button）并且它正在工作很好，直到我用上面的文字编辑了我的页面。

在某些显示器上，文字会覆盖图像，但不会完全覆盖 - 在图像下方和旁边有 space，图像可以从中窥视。

然而，这使得图像与文本重叠，打破了错觉。将 z-index 设置为 -1 使其位于文本后面，但无法单击。

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

列之间的 "eye" 是隐藏图像。

图像的当前代码：

<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 中，这是整个 window 的大小，因此链接永远不会根据 window 大小错位：

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 class 悬停在 div 的背景部分，通过将背景不透明度增加到 1（黑色）来淡出:

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;
      }

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

HTML text over image while maintaining background image clickability

html

css

image

z-index