您现在的位置:主页 > 网站制作 > CSS+DIV >

Google谷歌的CSS前景图片合并技术-Div+CSS教程

来源:建站吧 责任编辑:Jzq8 发表时间:2011-12-22 点击:
在以前的文章中介绍过背景图片的合并方法。但不只有背景图片能合并,前景图片同样可以。

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


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

示例代码 [www.Mb5u.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.Mb5u.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 进行图片定位,这与背景图片的定位是一致的。

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      评价:
      表情:
      验证码:点击我更换图片

      推荐图文

      • Div+CSS布局入门教程-页面顶部制作之一
      • Div+CSS布局入门教程-页面布局与规划
      • 建站吧:精简高效的CSS命名准则和方法
      • CSS初学者技巧:谈CSS的标准和最佳示例-Div+CSS教程
      • Google谷歌的CSS前景图片合并技术-Div+CSS教程
      • WEB标准网页布局中HTML结构化漫谈-Div+CSS教程
      • CSS网页布局经验:CSS框架思维雏形与CSS文件精简-Div+CSS教程
      • CSSSprites工作原理及其对CSS布局的意义、优点和缺点介绍-Div+CS
      • CSS布局之再谈CSSDiv的居中实现方法-Div+CSS教程

      新闻关注排行榜

      热门推荐 最新推荐
      Alexa - 客户服务 - 联系方法 - 招聘信息 - 友情链接 - 网站地图 - TAG标签 - RSS订阅
      Copyright © 2010-2012 JZQ8.COM. 建站吧|建站去吧 版权所有
      冀ICP备09002514号
      冀ICP备09002514号 网络报警 企业法人营业执照 中国互联网协会 支付宝付款 网银在线付款