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按钮包装在锚定标记中，这样锚定标记将拉伸为其内容的宽度和高度，从而使整个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>

Answer 2

您可以执行此操作。（用s / o替换图像）。使用您当前的样式，我在{strong> anchor 中添加了display: inline-block。

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

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

Working JSFiddle

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

2 个答案: