Question

看过这个问题很多次，但似乎解决方案适用于某些人但不适用于其他人：

代码如下：

.headbuttons {
  opacity: .7; 
  background-color: grey; 
  background-blend-mode: overlay; 
  display: block;
}

<a class="headbuttons" id="homebutton" href="C:\Users\Dom Nguyen\Documents\website.html"> 
<img src="C:\Users\Dom Nguyen\Documents\home_button.png" width="125" height="62.5"> </a>

尝试使用内联块和阻止显示的建议解决方案但是没有工作，可点击区域仍然比图像本身大得多。

Answer 1

只需将您的css更改为以下内容，其中包括宽度和高度：

.headbuttons {
  opacity: .7; 
  background-color: grey; 
  background-blend-mode: overlay; 
  display: block;
  width: 125px;
  height: 62.5px;
}

<a class="headbuttons" id="homebutton" href="C:\Users\Dom Nguyen\Documents\website.html"> 
<img src="C:\Users\Dom Nguyen\Documents\home_button.png" width="125" height="62.5"> </a>

Answer 2

我认为你可以设置宽度和高度，看起来像： <a width="125" height="62.5">

锚标签可点击区域大于图像内部

2 个答案: