/* 336x280*/
芒果在 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 进行图片定位，这与背景图片的定位是一致的。
/* 336x280*/
版权所有，转载请注明出处。
转载自 <a href="http://www.mangguo.org/css-foreground-image-merge-technology/" title="CSS 前景图片合并技术" rel="bookmark">CSS 前景图片合并技术 | 芒果小站</a>
已经有 27 条群众意见
- Paran
#1/2009-05-26 22:08Gooooooooooooooooooooooooooooood! 回应
- 芒果 对 说
#2/2009-05-26 22:37帕兰光临，小博欢迎。 回应
- 卢松松
#3/2009-06-01 22:45good，这正是我所需要的！ 回应
- tao
#4/2009-06-17 14:33好东东。 回应
- 【经典】CSS技巧教程资源大全 - 奇亚 Kiya's Blog
#5/2009-06-17 23:48[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 狼的一亩三分地 » 学无止境的CSS(xHTML+CSS技巧教程资源大全)
#6/2009-06-18 16:50[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 万戈
#7/2009-06-24 14:38原来前景图片也可以合并，学习了。 回应
- 克兰印象 » 60+CSS技巧教程资源大全
#8/2009-07-26 11:03[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- Young
#9/2009-08-08 20:16之前没有看到这篇文章，要不文章就会写得全面点。 回应
- 60+CSS技巧教程资源大全 | 帕兰映像
#10/2009-08-18 06:52[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 60+xHTML+CSS技巧教程资源大全 - Jeff-Chen.Com
#11/2009-08-27 13:52[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- abercrombie fitch
#12/2009-12-24 15:11了解下。。。 回应
- 行骏-IT Player » Blog Archive » CSS技巧教程资源大全
#13/2009-12-26 00:01[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 学无止境的CSS(xHTML+CSS技巧教程资源大全) « theU0net.Blog
#14/2010-01-21 01:45[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 还是再推荐一下这个CSS技巧教程资源大全 | SiteComment
#15/2010-02-25 21:08[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- CSS技巧教程资源大全
#16/2010-03-18 10:52[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- xiao3
#17/2010-04-11 14:15赞！ 回应
- 异次元的乱七八糟 » 60+CSS技巧教程资源大全
#18/2010-04-28 12:43[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 网站建设技集 » Blog Archive » XHTML+CSS技巧教程资源大全
#19/2010-05-08 16:43[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 60+CSS技巧教程资源大全
#20/2010-05-12 21:58[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 浩子
#21/2010-05-15 09:49这招果然厉害，不过细想回来，就是把 CSS 里的 Sprite 写在了 html 里面，有点搞人。 回应
- 学无止境的CSS(xHTML+CSS技巧教程资源大全)【推荐】
#22/2010-05-19 23:20[...] CSS 前景图片合并技术 | 芒果 [...] 回应
- 上海家具
#23/2010-07-18 14:17小站不错，感谢分享。 回应
- uiandue
#24/2010-10-27 20:22分析得好。 回应
- 优趣
#25/2010-10-28 12:34方法很不错、处理图标非常方便！ 回应
- 学无止境的CSS(xHTML+CSS技巧教程资源大全) | 前端殿堂
#26/2011-04-29 15:43[...] CSS 前景图片合并技术 | 芒果 不只背景图片可以合并，前景图片同样可以合并，本文介绍了Google网页里是如何对两个元素进行定位和溢出截断，来实现前景的图片合并。 P.S 其实才学习CSS Sprites的时候，就想着前景图片也一定是可以合并的，可自己却又一下子想不出来什么方法。看过这篇文章后，才发现是如此的简单，不禁为自己的智商挫败了好几秒 [...] 回应
- echo
#27/2011-08-25 09:26方法很不错、处理图标非常方便
shell pearl ring 回应
我简单说几句