/* 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 条评论
- Paran - 2009-05-26 22:08
#1Gooooooooooooooooooooooooooooood! 回应
- 芒果 对 说 - 2009-05-26 22:37
#2帕兰光临，小博欢迎。 回应
- 卢松松 - 2009-06-01 22:45
#3good，这正是我所需要的！ 回应
- tao - 2009-06-17 14:33
#4好东东。 回应
- 【经典】CSS技巧教程资源大全 - 奇亚 Kiya's Blog - 2009-06-17 23:48
#5[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 狼的一亩三分地 » 学无止境的CSS(xHTML+CSS技巧教程资源大全) - 2009-06-18 16:50
#6[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 万戈 - 2009-06-24 14:38
#7原来前景图片也可以合并，学习了。 回应
- 克兰印象 » 60+CSS技巧教程资源大全 - 2009-07-26 11:03
#8[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- Young - 2009-08-08 20:16
#9之前没有看到这篇文章，要不文章就会写得全面点。 回应
- 60+CSS技巧教程资源大全 | 帕兰映像 - 2009-08-18 06:52
#10[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 60+xHTML+CSS技巧教程资源大全 - Jeff-Chen.Com - 2009-08-27 13:52
#11[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- abercrombie fitch - 2009-12-24 15:11
#12了解下。。。 回应
- 行骏-IT Player » Blog Archive » CSS技巧教程资源大全 - 2009-12-26 00:01
#13[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 学无止境的CSS(xHTML+CSS技巧教程资源大全) « theU0net.Blog - 2010-01-21 01:45
#14[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 还是再推荐一下这个CSS技巧教程资源大全 | SiteComment - 2010-02-25 21:08
#15[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- CSS技巧教程资源大全 - 2010-03-18 10:52
#16[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- xiao3 - 2010-04-11 14:15
#17赞！ 回应
- 异次元的乱七八糟 » 60+CSS技巧教程资源大全 - 2010-04-28 12:43
#18[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 网站建设技集 » Blog Archive » XHTML+CSS技巧教程资源大全 - 2010-05-08 16:43
#19[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 60+CSS技巧教程资源大全 - 2010-05-12 21:58
#20[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 浩子 - 2010-05-15 09:49
#21这招果然厉害，不过细想回来，就是把 CSS 里的 Sprite 写在了 html 里面，有点搞人。 回应
- 学无止境的CSS(xHTML+CSS技巧教程资源大全)【推荐】 - 2010-05-19 23:20
#22[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 上海家具 - 2010-07-18 14:17
#23小站不错，感谢分享。 回应
我简单说几句