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

Question

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

它基本上是一张图片，您可以点击它，并从它的后面获得关于图片 "slide out" 的额外信息。

我遇到的问题是小部件的 clickable/hoverable/interactive 区域。即使我使用了 border-radius，我仍然在小部件周围得到一个方形的可点击区域。（将鼠标悬停在框角应该所在的位置。）

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

我已经找到了这个... Why is the margin space of my image link clickable? 我从图像的 class 中删除了 "display: block;" 规则，但我仍然有这个 "ghost area".

的问题

我不确定这个元素发生了什么。这些是唯一应用于它的样式（“.profile”是图像的 class）：

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

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

编辑：我也按照一些 Stack Overflow 线程的建议玩弄了 "overflow: hidden;"，但这也没有帮助。

编辑 2：找到这些：

Should border-radius clip the content?
How do I prevent an image from overflowing a rounded corner box with CSS3?
CSS3 border-radius clipping issues

Answer 1

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

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

Codepen Example

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

Interactive area of linked images with rounded corners

html

css

css-shapes