开心五月六月婷婷综合啪啪,亚洲乱码无限2021芒果

Google谷歌的CSS前景圖片合并技術(shù)

2017-02-21 15:01:01 次瀏覽

&emsp;&emsp;在mf1288.com以前的文章中介紹過背景圖片的合并方法。但不只有背景圖片能合并，前景圖片同樣可以。&emsp;&emsp;CSS Sprites工作原理及其對CSS布局的意義、優(yōu)點(diǎn)和缺點(diǎn)介紹&emsp;&emsp;http://www.qiegegongcheng.com/news_show.aspx?newsid=325&a…

在mf1288.com以前的文章中介紹過背景圖片的合并方法。但不只有背景圖片能合并，前景圖片同樣可以。

CSS Sprites工作原理及其對CSS布局的意義、優(yōu)點(diǎn)和缺點(diǎn)介紹
http://www.qiegegongcheng.com/news_show.aspx?newsid=325&newstreeid=55&newstypeid=2@trid=0

淺談CSS Sprites技術(shù)以及圖片優(yōu)化
http://www.qiegegongcheng.com/news_show.aspx?newsid=326&newstreeid=55&newstypeid=2@trid=80
再談CSS高級技巧：css sprites技術(shù)
http://www.qiegegongcheng.com/news_show.aspx?newsid=327&newstreeid=55&newstypeid=2@trid=0

在 Google 搜索結(jié)果頁面中，將其 Logo 圖標(biāo)右鍵另存為后可以發(fā)現(xiàn)，它并非單純的 Google Logo，而是一塊復(fù)雜的拼合圖片：

查看搜索頁面源代碼，其 Logo 部分代碼如下：

Example Source Code [www.mf1288com]

Google

其CSS 部分代碼如下：

Example Source Code [www.qiegegongcheng.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}

分析上述代碼可知，CSS 中 id=logo 的樣式父元素采用相對定位方式，定義了寬度和高度，使用 overflow:hidden 來隱藏溢出部分；而 img 元素則采取絕對定位方式，使用 left 和 top 進(jìn)行圖片定位，這與背景圖片的定位是一致的。

上一條：再談css sprites技術(shù)

下一條：Div+CSS網(wǎng)頁布局心得

返回列表

Google谷歌的CSS前景圖片合并技術(shù)

友情鏈接：