Html 圆形图像充当正方形

我有一个图像，它位于一个大锚的顶部。圆形图像在视觉上看起来是正确的，但是该图像在DOM上仍然是方形的，并且限制了对下方锚的访问

如何使圆形图像没有正方形可选择区域

下面是一个JS提琴来说明这个问题。 整个蓝色正方形是一个锚点，但请注意，即使图像是圆形的，它仍然有方形角挡住锚点。如果光标靠近图像，则定位点不会进入悬停状态

来自JSFIDLE的代码：

#包装器{
位置：相对位置；
宽度：500px；
高度：500px；
}
.外部{
背景颜色：蓝色；
高度：250px；
宽度：250px；
z指数：8；
}
.外部a{
显示：块；
宽度：100%；
身高：100%；
z指数：9；
}
.a:悬停{
背景颜色：绿色；
}
.圆圈{
显示：块；
背景：红色；
宽度：170px；
高度：170px；
边界半径：50%；
位置：绝对位置；
顶部：25px；
左：25px；
z指数：11；
}

使图像成为一个

div

，边界半径为其宽度的一半，使其成为一个圆。然后使用

背景图像

将div设置为您的“图像”

HTML

<!-- Change this -->
<img src="http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" class="circle" />
<!-- To this -->
<div class="circle catpic"></div>

但是，请注意，因此您可能必须使用来绕过此问题。

使图像成为一个

div

，边界半径为其宽度的一半，使其成为一个圆。然后使用

背景图像

将div设置为您的“图像”

HTML

<!-- Change this -->
<img src="http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" class="circle" />
<!-- To this -->
<div class="circle catpic"></div>

---

但是，请注意，因此您可能必须使用才能绕过此问题。

删除外部俯冲的高度和宽度此处是链接

---

移除外部俯冲的高度和宽度此处是链接

---

圆形图像现在有一个圆形可选区域

.outer {
    background-color: blue;
    z-index: 8;
    background-repeat: no-repeat;
    border-radius: 50%;
    width: 170px;
    height: 170px;
    top:25px;
    left:25px;
    position:absolute;
}

---

圆形图像现在有一个圆形可选区域

.outer {
    background-color: blue;
    z-index: 8;
    background-repeat: no-repeat;
    border-radius: 50%;
    width: 170px;
    height: 170px;
    top:25px;
    left:25px;
    position:absolute;
}

---

为锚点指定与图像相同的边界半径。哪个浏览器？在FF37和Chrome 41上运行良好，使锚定与图像具有相同的边界半径。哪个浏览器？在FF37和Chrome 41上工作得很好现在的问题是：“为什么它与div而不是图像标签一起工作……”太好了，谢谢。当我使用Angular时，我扩展到：

现在的问题是：“为什么它与div而不是图像标记一起工作…”太好了，谢谢。当我使用Angular时，我扩展到：

我的脚本修复了一个断开的链接，但是由于许可，我无法从JSFIDLE复制代码。请考虑将它添加为一个片断。我的脚本修复了一个断开的链接，但是由于许可证，我无法从JSFDDLE中复制代码。请考虑将其添加为片断。

.outer {
    background-color: blue;
    z-index: 8;
    background-repeat: no-repeat;
    border-radius: 50%;
    width: 170px;
    height: 170px;
    top:25px;
    left:25px;
    position:absolute;
}