带圆角的链接图像的交互区域

Question

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

它基本上是一个可以单击的图像,并且有关于图像从其后面"滑出"的额外信息.

我遇到的问题是小部件的可点击/可移动/交互区域.即使我使用了border-radius,我仍然会在小部件周围获得一个方形的可点击区域.(将鼠标悬停在盒子角落的位置.)

我已经确定问题的根源是图像元素本身.如果我删除图像元素,我不再有这个问题.

我已经发现了这个... 为什么我的图像链接的边距空间可以点击？ 我删除了"display:block;" 从图像的类中统治,我仍然有这个"鬼区"的问题.

我不确定这个元素到底发生了什么.这些是应用于它的唯一样式(".profile"是图像的类):

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

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

编辑:我也玩弄"溢出:隐藏;" 正如一些Stack Overflow线程所暗示的那样,但这也没有帮助.

编辑2:发现这些:

• 边界半径应该剪辑内容吗？
• 如何使用CSS3防止图像溢出圆角框？
• CSS3 border-radius剪切问题

Answer 1

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

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

Codepen 示例