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

GD Star Rating
loading...

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

已有25条评论 发表评论

  1. 菠萝 /

    哈哈,这是个好方法,万戈说有 不同方法,让他过来说说

    GD Star Rating
    loading...
  2. China Wholesale /

    功能很强大,采用了CSS Sprites 技术,让我的网站速度快了一点,就这一点,意义是很大的,大大减少了向服务器Request!给网站服用器减压拉!再次感谢!

    GD Star Rating
    loading...
  3. 三七八蛋 /

    这个CSS效果要多应用,比如你的表情也可以这样做

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      :(2): 表情这样实现不了吧,是动态的呢。。。

      GD Star Rating
      loading...
  4. huangjun /

    嗯,这个效果就跟以前的map是一样的。

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      嗯 搜索引擎看到的是a标签,我们看到的是图片 :(24):

      GD Star Rating
      loading...
  5. Jclyn /

    我一開始還在想
    一個圖片連3個
    那到底是打開哪一個
    現在算是懂了
    哈哈

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      :(11): 把你弄迷糊了吧 :(18):

      GD Star Rating
      loading...
  6. GEZ鸽子 /

    几个LOGO不错! :(4):

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      :(4): 我也是找的

      GD Star Rating
      loading...
  7. 园子 /

    嘿嘿
    这个效果不错哈。

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      :(24): 夸奖了

      GD Star Rating
      loading...
  8. 笨笨 /

    单个图片插入多个链接呵呵笨笨的话会用最笨的方法DW里面的热点功能。。。够傻吧

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      只要能达到自己的效果就行了 :(16):

      GD Star Rating
      loading...
      1. 笨笨 /

        你的教程那才叫杠杠的。。

        GD Star Rating
        loading...
  9. 老七 /

    不错。。很久没来。。

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      :(1): 呵呵,我也是很久没到处逛了 :(4):

      GD Star Rating
      loading...
  10. QiQBoY /

    这个方法很值得提倡。。 :(16):

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      :(11): 我也是想尽办法加快网页打开速度

      GD Star Rating
      loading...
  11. 风云春秋博客 /

    技术文章 闪过 看不懂代码

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      其实也没啥的 :(4):

      GD Star Rating
      loading...
  12. 万戈 /

    木有看到效果嘛。。。

    GD Star Rating
    loading...
    1. zenoven / 本文作者

      :(4): 有的啊,在首页右下角,我文章页的sidebar没显示

      GD Star Rating
      loading...
      1. 万戈 /

        哦哦,看到了,和我想象中的不一样

        GD Star Rating
        loading...
        1. 菠萝 /

          老万,说说你的方法,分享一下,一块收了

          GD Star Rating
          loading...

发表评论