芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
29

CSS 前景图片合并技术

作者 芒果/分类 代码/发布于 2009-05-25 22:10

芒果在 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://mangguo.org/css-foreground-image-merge-technology/" title="CSS 前景图片合并技术" rel="bookmark">CSS 前景图片合并技术 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 29 条群众意见

  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
  24. uiandue /2010-10-27 20:22

    分析得好。 回应

    #24
  25. 优趣 /2010-10-28 12:34

    方法很不错、处理图标非常方便! 回应

    #25
  26. ?
    学无止境的CSS(xHTML+CSS技巧教程资源大全) | 前端殿堂 /2011-04-29 15:43

    […] CSS 前景图片合并技术 | 芒果 不只背景图片可以合并,前景图片同样可以合并,本文介绍了Google网页里是如何对两个元素进行定位和溢出截断,来实现前景的图片合并。 P.S 其实才学习CSS Sprites的时候,就想着前景图片也一定是可以合并的,可自己却又一下子想不出来什么方法。看过这篇文章后,才发现是如此的简单,不禁为自己的智商挫败了好几秒 […] 回应

    #26
  27. echo /2011-08-25 09:26

    方法很不错、处理图标非常方便
    shell pearl ring 回应

    #27
  28. ?
    学无止境的CSS(xHTML+CSS技巧教程资源大全) | 徐福坤,个人博客 /2012-05-19 16:01

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

    #28
  29. ?
    朝心 » 60+CSS技巧教程资源大全 /2015-10-15 10:58

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

    #29

下面我简单说几句