Question

我的图像位于大锚的顶部。圆形图像在视觉上看起来是正确的，但是图像仍然在DOM上充当正方形并且限制访问下面的锚。

如何才能使圆角图像没有方形可选区域？

这是一个显示问题的JS小提琴。 https://jsfiddle.net/jp81fp3u/1/ 整个蓝色方块是一个锚点，但即使图像是圆形的，它仍然有方形角落阻挡锚点。如果光标要靠近图像，则锚点不会进入悬停状态。

来自JSFiddle的代码：

＆＃13;

#wrapper {
    position: relative;
    width: 500px;
    height: 500px;
}

.outer {
    background-color: blue;
    height: 250px;
    width: 250px;
    z-index: 8;
}

.outer a {
    display: block;
    width: 100%;
    height: 100%;
    z-index: 9;  
}

.outer a:hover {
    background-color: green;
}

.circle {
    display: block;
    background: red;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 11;
}

＆＃13;

        <div id="wrapper">
    <div class="outer">
        <a href="#">
            anchor
        </a>
    </div>
    <img src="http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" class="circle" />
</div>

＆＃13;

Answer 1

jsFiddle

将图片设为div，border-radius为宽度的一半，使其成为圆形。然后使用background-image将div设为您的“图片”

<强> HTML

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

<强> CSS

// Add this
.catpic {
    background-image: url(http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg);
    background-size: cover;
}

但请注意IE8 does not support background-size，因此您可能必须使用a number of ways来解决此问题。

Answer 2

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

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

}

Answer 3

从外部潜水中移除高度宽度，此处为链接jsfiddle

圆形图像作为广场

3 个答案: