您当前的位置:首页 > 网页设计 > Web开发 > 正文

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

【字体大小: 2009-12-03 18:10 来源: 作者: 

  在以前的文章中介绍过背景图片的合并方法。但不只有背景图片能合并,前景图片同样可以。

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

  

 

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

  1. <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 部分代码如下:  

  1. #logo{display:block;overflow:hidden;position:relative;width:150px;height:52px;margin:14px 0 7px}  
  2. #logo img{border:none;position:absolute;left:-0px;top:-26px

  分析上述代码可知,CSS 中 id=logo 的样式父元素采用相对定位方式,定义了宽度和高度,使用 overflow:hidden 来隐藏溢出部分;而 img 元素则采取绝对定位方式,使用 left 和 top 进行图片定位,这与背景图片的定位是一致的。

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    【责任编辑:绝口不提】 标签:
    最新评论 查看所有评论
    发表评论 查看所有评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    用户名:密码:验证码: