html - 图片按钮在 HTML5/CSS3 中不可点击

Question

我在让图像在我的网站上可点击时遇到问题。我所有带有链接的标准按钮都可以正常工作。下面我将粘贴与相关按钮相关的 CSS 和 HTML5 代码。出于显而易见的原因，我省略了实际链接。

.button3 {
  background-image: url("donate.png");
  background-size: cover;
  background-position: center;
  border-radius: 25px;
  cursor: pointer;
  width: 200px;
  height: 60px;
  margin-left: 500px;
  margin-right: 5px;
  margin-top: 40px;
}

<div class="button3">
  <a href="link" class="button3"></a>
</div>

Answer 1

您可以改为将 div 按钮包裹在 anchor 标记中，这样您的 anchor 标记将拉伸(stretch)为其内容的宽度和高度，从而使您可以点击整个 div。

请看下面的例子:

.button3 {
  background-image: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=f13ebeedfa9e");
  background-size: cover;
  background-position: center;
  border-radius: 25px;
  cursor: pointer;
  width: 200px;
  height: 150px;
  /*margin-left:500px;
  margin-right:5px;*/
  margin-top: 40px;
}

<a href="link">
  <div class="button3">
  </div>
</a>