html图片添加超链接

我想实现在图片上添加一个小logo或者是文字，然后将这个logo或文字作为超链接，如何实现？？？

---

Html是一层一层的，你可以用index来决定a标签在上面，然后使用绝对定位

---

加入你说的不是ps处理图片的话，那么就使用绝对定位将文字定位在图片上：

        <div style="position: relative;">
            <img  src="https://sf-static.b0.upaiyun.com/v-56d80ae2/global/img/logo-b.svg"/>
            <span style="position: absolute;left: 0;">
                <a href="http://baidu.com">我是文字,我在图片上面</a>
            </span>
        </div>

---

方案1:

给图片外边套一个a标签，这样整张图片任何部位都可点击;

方案2:

给你要添加的文字或小logo套a标签，然后定位到图片上;

方案3:

直接把要添加的文字或logo通过ps做到一起，然后给logo部分设置可点击热区;

方案4:

给要加超链接的部分绑定js click事件，达到模拟超链接的效果;

总之实现方法有很多种，选择能实现需求的就好！

---

/* html */
<div class="bg-img">
    <a href="#">这是链接</a>
</div>

/* css */
.bg-img {
   width: 200px;
   height: 200px;
   background: url(../images/xx.png) no-repeat center;
   background-size: 100%;
}

.bg-img a {
   display: block;
   width: 200px;
   height: 200px;
   text-align: center;
   line-height: 200px;
}

---

w3school html中链接那块有个星球图，那个符合你的要求

---

设置热点图，可以在dreamweaver里设置，这里

---

可以用定位的方法 定位到想要的位置。。 也可以用css 热图

---

html map标签