• CSS Sprites技巧:单个图片插入多个链接

    平时我们做网页的时候会用到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更换图片。