HTML5 中图像顶部的超链接文本

Hyperlink text on top of image in HTML5

本文关键字：超链接 文本 顶部 图像 HTML5      更新时间：2023-09-26

我想在HTML5中的图像顶部创建一个超链接文本。请建议怎么做？

雷加尔斯，拉维

你不需要javascript，只有这个css和html 

<div id ="all"><a href="http://google.com">Click here to go</a></div>
#all{    
background:url('http://jsfiddle.net/img/initializing.png') no-repeat;
width: 200px;
height: 200px;
}

演示

根据需要提供4个链接 

<div id ="all">
<a href="http://google.com">Click here to go1</a><br>
<a href="http://hotmail.com">Click here to go1</a><br>
<a href="http://yahoo.com">Click here to go1</a><br>
<a href="http://google.com">Click here to go1</a><br>
</div>

演示

使用图像映射。这使您可以拥有任意数量的链接，而无需CSS！

但是，图像映射在（某些）iPhone上存在错误。

相关文章：