如何在一整张背景图中，加隐形的a标签

很常见的一个需求，就上图每个国家图标都得加上各自指定的a标签

这时，我们就可以去加上隐藏且定位准确的几个a标签

这个时候，主要用到的就是text-indent和overflow 这两个属性的配合。text-indent 属性规定文本块中首行文本的缩进；overflow 属性规定当内容溢出元素框时发生的事情。

案例：

<div style="position:relative;margin:0 10px;">

<img src="https://i.alipayobjects.com/i/localhost/png/201501/4DiyU5rSSb.png" style="width:100%">

<a id="tuishui1" href="http://ds.alipay.com/fd-peece7p90o1/index.html" class="country" style="width:16%;height:17%;left:14%;top:21%;">荷兰</a>

<a id="tuishui2" href="http://ds.alipay.com/fd-nn1d11oso5k/index.html" class="country" style="width:23%;height:25%;left:18%;top:53%;">意大利</a>

<a id="tuishui3" href="http://ds.alipay.com/fd-556xg2aa4tq/index.html" class="country" style="width:16%;height:18%;left:35%;top:34%;">德国</a>

<a id="tuishui4" href="http://ds.alipay.com/fd-vsnvd6on474/index.html" class="country" style="width:15%;height:16%;left:43%;top:12%;">瑞士</a>

<a id="tuishui5" href="http://ds.alipay.com/fd-leogk4hpv6s/index.html" class="country" style="width:21%;height:22%;left:64%;top:4%;">英国</a>

<a id="tuishui6" href="http://ds.alipay.com/fd-ytp228dt7wn/index.html" class="country" style="width:22%;height:24%;left:55%;top:30%;">韩国</a>

<a id="tuishui7" href="http://ds.alipay.com/fd-vtev8ix3xsw/index.html" class="country" style="width:19%;height:21%;left:65%;top:57%;">法国</a>

<a id="tuishui8" href="http://ds.alipay.com/fd-j1338t72e2q/index.html" class="country" style="width:16%;height:18%;left:48%;top:78%;">西班牙</a>

</div>

<style>

.country {

  position: absolute;

  display: block;

  text-indent: 30em;

  overflow: hidden;

  border-radius: 100px;

}

</style>