css链接图片只能点击一部分

Question

我想只在左侧点击字母“F”，其他部分点击不可点击。我正在尝试使用css类潜水员，但没有工作。

HTML

<a href="https://www.google.com" class="diver" target="_blank">
<div style="margin-top:0px;">
<img src="http://www.upslike.net/imgdb/facebook-4846a5.png" width="30%" height="60px">
</div>
</a>

CSS

<style>
.diver a{
    display:block;
    width:100px;
    height:60px;
}
</style>

CodePen

Answer 1

如果图片必须在HTML中。

注意：“通用重置”（app:theme部分）会影响当前问题范围之外的元素。脑海中浮现着标题，段落和列表。

*

* {
    margin: 0;
    padding: 0;
}

.diver-wrap {
    display: inline-block;
    position: relative;
    margin: 1em;
}
a.diver {
    position: absolute;
    top:0;
    left: 0;
    width:100px;
    height:60px;
    background: rgba(0,0,0,.25); /* for visual reference */
}