圆形图像作为广场

Question

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

我怎样才能使圆角图像没有方形可选区域？

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

来自JSFiddle的代码:

#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;
}

        <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>

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不支持background-size,因此您可能必须使用多种方法来解决此问题.