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

Question

在我的网站上我有一个“隐藏”的background按钮（它与background混合，但是秘密地是button）并且它在我编辑之前一直正常工作我的页面上有文字。

在某些显示器上，文字覆盖了图像，但并不完全 - 图像在其下方和旁边有空间，图像透过它。

然而，这使得图像与文本重叠，打破了幻觉。将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

如果我理解正确，将position:relative提供给包含您可以实现的文本的元素的容器/包div和pointer-events:none

段

body {
  margin: 0 /* demo */
}
.wrap {
  position: relative;
}
img {
  width: 108px;
  height: 32px;
  z-index: -1;
  position: relative
}
a:hover img {
  opacity: .5  /* demo */
}
span {
  position: absolute;
  left: 0;
  pointer-events: none;
  display: inline-block; /* demo */
  background: red /* demo */
}

<div class="wrap">
  <a href="#">
    <img src="//lorempixel.com/1600/900">
  </a>
  <span>some text</span>
</div>

Answer 2

我重新安排了网站布局，使用可点击的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类，因此将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;
      }