芒果

/* 300x250 */

芒果在 CSS Sprites,图片切割与优化技术中介绍过背景图片的合并方法。但不只有背景图片能合并,前景图片同样可以。

Google 搜索结果页面中,将其 Logo 图标右键另存为后可以发现,它并非单纯的 Google Logo,而是一块复杂的拼合图片:

查看搜索页面源代码,其 Logo 部分代码如下:

<a id=logo href="http://www.google.cn/webhp?hl=zh-CN" title="Google 主页">Google<img width=168 height=119 src="/images/nav_logo4.png" alt=""></a>

其 CSS 部分代码如下:

#logo{display:block;overflow:hidden;position:relative;width:150px;height:52px;margin:14px 0 7px}
#logo img{border:none;position:absolute;left:-0px;top:-26px}

分析上述代码可知,CSS 中 id=logo 的样式父元素采用相对定位方式,定义了宽度和高度,使用 overflow:hidden 来隐藏溢出部分;而 img 元素则采取绝对定位方式,使用 left 和 top 进行图片定位,这与背景图片的定位是一致的。

版权所有,转载请注明出处。
转载自 <a href="http://www.mangguo.org/css-foreground-image-merge-technology/" title="CSS 前景图片合并技术" rel="bookmark">CSS 前景图片合并技术 | 芒果</a>

已经有 23 条评论

  1. Paran - 2009-05-26 22:08

    Gooooooooooooooooooooooooooooood! 回应

    #1
  2. 芒果Paran 说 - 2009-05-26 22:37

    帕兰光临,小博欢迎。 回应

    #2
  3. 卢松松 - 2009-06-01 22:45

    good,这正是我所需要的! 回应

    #3
  4. tao - 2009-06-17 14:33

    好东东。 回应

    #4
  5. 【经典】CSS技巧教程资源大全 - 奇亚 Kiya's Blog - 2009-06-17 23:48

    [...] CSS 前景图片合并技术 | 芒果 [...] 回应

    #5
  6. 狼的一亩三分地 » 学无止境的CSS(xHTML+CSS技巧教程资源大全) - 2009-06-18 16:50

    [...] CSS 前景图片合并技术 | 芒果 [...] 回应

    #6
  7. 万戈 - 2009-06-24 14:38

    原来前景图片也可以合并,学习了。 回应

    #7
  8. 克兰印象 » 60+CSS技巧教程资源大全 - 2009-07-26 11:03

    [...] CSS 前景图片合并技术 | 芒果 [...] 回应

    #8
  9. Young - 2009-08-08 20:16

    之前没有看到这篇文章,要不文章就会写得全面点。 回应

    #9
  10. 60+CSS技巧教程资源大全 | 帕兰映像 - 2009-08-18 06:52

    [...] CSS 前景图片合并技术 | 芒果 [...] 回应

    #10
  11. 60+xHTML+CSS技巧教程资源大全 - Jeff-Chen.Com - 2009-08-27 13:52

    [...] CSS 前景图片合并技术 | 芒果 [...] 回应

    #11
  12. abercrombie fitch - 2009-12-24 15:11

    了解下。。。 回应

    #12
  13. 行骏-IT Player » Blog Archive » CSS技巧教程资源大全 - 2009-12-26 00:01

    [...] CSS 前景图片合并技术 | 芒果 [...] 回应

    #13
  14. 学无止境的CSS(xHTML+CSS技巧教程资源大全) « theU0net.Blog - 2010-01-21 01:45

    [...] CSS 前景图片合并技术 | 芒果 [...] 回应

    #14
  15. 还是再推荐一下这个CSS技巧教程资源大全 | SiteComment - 2010-02-25 21:08

    [...] CSS 前景图片合并技术 | 芒果 [...] 回应

    #15
  16. CSS技巧教程资源大全 - 2010-03-18 10:52

    [...] CSS 前景图片合并技术 | 芒果 [...] 回应

    #16
  17. xiao3 - 2010-04-11 14:15

    赞! 回应

    #17
  18. 异次元的乱七八糟 » 60+CSS技巧教程资源大全 - 2010-04-28 12:43

    [...] CSS 前景图片合并技术 | 芒果 [...] 回应

    #18
  19. 网站建设技集 » Blog Archive » XHTML+CSS技巧教程资源大全 - 2010-05-08 16:43

    [...] CSS 前景图片合并技术 | 芒果 [...] 回应

    #19
  20. 60+CSS技巧教程资源大全 - 2010-05-12 21:58

    [...] CSS 前景图片合并技术 | 芒果 [...] 回应

    #20
  21. 浩子 - 2010-05-15 09:49

    这招果然厉害,不过细想回来,就是把 CSS 里的 Sprite 写在了 html 里面,有点搞人。 回应

    #21
  22. 学无止境的CSS(xHTML+CSS技巧教程资源大全)【推荐】 - 2010-05-19 23:20

    [...] CSS 前景图片合并技术 | 芒果 [...] 回应

    #22
  23. 上海家具 - 2010-07-18 14:17

    小站不错,感谢分享。 回应

    #23

我简单说几句

推荐文章

最新评论

友情链接

一夜激情