网络编程
位置:首页>> 网络编程>> 网页设计>> Google谷歌的CSS前景图片合并技术

Google谷歌的CSS前景图片合并技术

  发布时间:2009-07-13 12:21:00 

标签:css,google,图片,图标

在 Google 搜索结果页面中,将其 Logo 图标右键另存为后可以发现,它并非单纯的 Google Logo,而是一块复杂的拼合图片:


  查看搜索页面源代码,其 Logo 部分代码如下:

<a id=logo href="https://img.aspxhome.com/file/UploadPic/20097/13/nav_logo4-40.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 进行图片定位,这与背景图片的定位是一致的。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com