Google谷歌的CSS前景圖片合并技術_Div+CSS教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
在Mb5u.com以前的文章中介紹過背景圖片的合并方法。但不只有背景圖片能合并，前景圖片同樣可以。
在 Google 搜索結果頁面中，將其 Logo 圖標右鍵另存為后可以發現，它并非單純的 Google Logo，而是一塊復雜的拼合圖片：
查看搜索頁面源代碼，其 Logo 部分代碼如下：
其CSS 部分代碼如下：
分析上述代碼可知，CSS 中 id=logo 的樣式父元素采用相對定位方式，定義了寬度和高度，使用 overflow:hidden 來隱藏溢出部分；而 img 元素則采取絕對定位方式，使用 left 和 top 進行圖片定位，這與背景圖片的定位是一致的。
在 Google 搜索結果頁面中，將其 Logo 圖標右鍵另存為后可以發現，它并非單純的 Google Logo，而是一塊復雜的拼合圖片：
查看搜索頁面源代碼，其 Logo 部分代碼如下：
示例代碼 [www.wf0088.com]
<a id=logo href="/tz.php?url=www.google.cn/webhp?hl=zh-CN" title="Google 主頁">Google<img width=168 height=119 src="/images/nav_logo4.png" alt=""></a>
其CSS 部分代碼如下：
示例代碼 [www.wf0088.com]
#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}
#logo img{border:none;position:absolute;left:-0px;top:-26px}
分析上述代碼可知，CSS 中 id=logo 的樣式父元素采用相對定位方式，定義了寬度和高度，使用 overflow:hidden 來隱藏溢出部分；而 img 元素則采取絕對定位方式，使用 left 和 top 進行圖片定位，這與背景圖片的定位是一致的。
相關Div+CSS教程：
- 相關鏈接：
- 教程說明：
Div+CSS教程-Google谷歌的CSS前景圖片合并技術
。