标签数目统计值 290
分类 技巧 作者 芒果 发布于 2009年05月25日 1,928 次阅读 15 条评论

芒果在 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 进行图片定位,这与背景图片的定位是一致的。

标签 ,
链接 CSS 前景图片合并技术

如需转载,请粘贴以下代码至文章末尾。 转载自 <a href="http://www.mangguo.org/css-foreground-image-merge-technology/" title="CSS 前景图片合并技术" rel="bookmark">CSS 前景图片合并技术 | 芒果</a>

如果喜欢芒果的文章,欢迎订阅。Google Reader | 鲜果 | 抓虾 | 九点 | QQ邮箱 | 有道 | 更多

评论列表

Paran 说 2009年05月26日  @  10:08 下午

Gooooooooooooooooooooooooooooood!

回复回复
芒果 说 2009年05月26日  @  10:37 下午

@Paran
帕兰光临,小博欢迎。

回复回复
卢松松 说 2009年06月1日  @  10:45 下午

good,这正是我所需要的!

回复回复
tao 说 2009年06月17日  @  2:33 下午

好东东。

回复回复

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

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

万戈 说 2009年06月24日  @  2:38 下午

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

回复回复

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

Young 说 2009年08月8日  @  8:16 下午

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

回复回复

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

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

abercrombie fitch 说 2009年12月24日  @  3:11 下午

了解下。。。

回复回复

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

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

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

撰写评论

昵称 *

邮件 *

网站