html - 圆像方

Question

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

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

这是一个 JS fiddle 来显示问题。 https://jsfiddle.net/jp81fp3u/1/ 整个蓝色方 block 是一个 anchor ，但请注意，即使图像是圆形的，它仍然有方 Angular 挡住 anchor 。如果光标靠近图像，则 anchor 不会进入悬停状态。

来自 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 does not support background-size , 所以你可能不得不使用 a number of ways来解决这个问题。