自由人

平时我们做网页的时候会用到img标签来插入图片，再结合a标签可以给图片加上链接，但是其实单独用a标签就可以实现这样的效果，而且可以在单个图片中插入多个链接。

本文的基本做法就是用CSS Sprites将多个图片合并为1个，用CSS中的background属性代替img标签，用background-position来实现多个图片链接的最终效果。

例如原来3个图片链接的HTML代码如下

<a href="#"><img src="#" /></a>
<a href="#"><img src="#" /></a>
<a href="#"><img src="#" /></a>

现在用CSS Sprites时HTML代码为

<a id="a"href="#">链接名称1</a>
<a id="b"href="#">链接名称2</a>
<a id="c"href="#">链接名称3</a>

CSS代码为

#a,#b,#c{
	display:block;
	width:250px;
	margin:5px auto;
	text-indent:-999em;
	background:url(img.png) no-repeat;
}
#a{
	height:100px;
	background-position:0 0;
}
#b{
	height:90px;
	background-position:0 -100px;
}
#c{
	height:70px;
	background-position:0 -190px;
}

注:本例中的图片为250*260(a,b,c的高度分别为100px,90px,70px)，我的小站这样做修改后的实际效果如下图，具体效果可以参看http://www.zenoven.com首页右下角处的图片链接。

那么有朋友要问，这样做的好处是什么呢？

1、3个图片合为1个，减少了HTTP请求数量，在图片大小没有大的变化时可以加快网页加载速度。

2、a标签中的<img />没有了，取而代之的是链接名称，有利于SEO。

3、DIV+CSS的一个要求是内容与表现形式的分离，这样做可以在不修改HTML的情况下直接通过修改CSS更换图片。