单击被图像覆盖的按钮答案

【问题标题】：Click in a button overwritten by an image单击被图像覆盖的按钮
【发布时间】：2016-12-13 10:42:14
【问题描述】：

在我的 HTML 网站中，我有一个按钮，我尝试在此按钮上添加一个透明图像。之后我无法单击此按钮。我的问题是这样的：

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}

<div id="container">
  <img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px" ;height="200px" />
  <a href="#">
        Click here
    </a>
</div>

非常感谢您的帮助！

【问题讨论】：

糟糕的用户体验！第一印象。为什么你需要它？建议使用比锚点更低的 z-index 值。

标签： javascript jquery html css web

【解决方案1】：

要解决此问题，您可以将图像的z-index 设置为低于a 元素（默认为0）

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

<div id="container">
  <img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px" ;height="200px" />
  <a href="#">
    Click here
  </a>
</div>

或者，您可以将图像用作容器上的背景，而无需绝对定位它，或者根本不需要更改 z-index。

【讨论】：

【解决方案2】：

您需要在按钮上添加一个z-index 并为其指定位置relative

.button {
  z-index: 1;
  position: relative;
}

这是你需要使用的代码

html

<div id="container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="200px";height="200px"/>
<a class="button" href="#">
    Click here
</a>

css

#container
{
    height:400px;
    width:400px;
    position:relative;
}

#image
{    
    position:absolute;
    left:0;
    top:0;
}

.button {
  z-index: 10;
  position: relative;
}

见js fiddle here

【讨论】：

【解决方案3】：

您可以根据需要更改图像容器的宽度和高度..

#container {
  height: 400px;
  width: 400px;
  position: relative;
  }
#image-container{
  width:100%;
  height:100%;
  background-image: url("http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png");
  background-position:center;
  background-size:contain;
}

<div id="container">
  <div id="image-container">
  <a href="#">
        Click here
    </a>
    </div>
</div>

【讨论】：

我同意，使用 z-index 会更好。