Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

非常感谢你的帮助！

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

或者你可以使用图像作为容器的背景，避免绝对定位，或者根本不得更改z-index。

Answer 2

您需要在按钮上添加DataProviders并将其设置为z-index

relative

以下是您需要使用的代码

<强> HTML

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

<强> CSS

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

请参阅js fiddle here

Answer 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>

单击由图像覆盖的按钮

3 个答案: