圆角链接图像的交互区域答案

【问题标题】：Interactive area of linked images with rounded corners圆角链接图像的交互区域
【发布时间】：2015-04-22 15:59:07
【问题描述】：

我正在构建这个小部件：http://codepen.io/JonnyNineToes/pen/zGYxwV

它基本上是一张图片，您可以点击它，并获得关于从其后面“滑出”的图片的额外信息。

我遇到的问题是小部件的可点击/可悬停/交互区域。即使我使用了边框半径，我仍然在小部件周围获得了一个方形的可点击区域。（将鼠标悬停在框的角应该是的位置。）

我已确定问题的根源在于图像元素本身。如果我删除图像元素，我不再有这个问题。

我已经找到了... Why is the margin space of my image link clickable? 我删除了“显示：块；”从图像的类规则，我仍然有这个“鬼区”的问题。

我不确定这个元素是怎么回事。这些是唯一应用于它的样式（“.profile”是图像的类）：

.profile, .description {
  position: absolute;
  border-radius: 150px;
  width: 300px;
  height: 300px;
}

.profile {
  left: 0;
  top: 0;
  z-index: 2;
}

编辑：我也玩弄过“溢出：隐藏；”正如一些 Stack Overflow 线程所建议的那样，但这也无济于事。

编辑 2：找到这些：

【问题讨论】：

适用于 Firefox，但不适用于 Chrome。一种可能的解决方法是将图像作为元素而不是图像的背景。

标签： html css css-shapes

【解决方案1】：

似乎适用于 Chrome 的解决方案（Firefox 37 似乎按预期工作）是使用带有背景图像集的另一个元素。其他一切都是一样的。当然，您会丢失 alt 属性。如果您使用的图像不仅仅是美观，那么您应该找到另一种方式来提供该信息，或者坚持使用<img /> 标签。

<span style="background: url('http://i.imgur.com/BfLc7dD.jpg')" class="profile">

Codepen Example

【讨论】：