Google谷歌的CSS前景图片合并技术
时间:2009-07-13 12:21:00
在 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 进行图片定位,这与背景图片的定位是一致的。
标签:css,google,图片,图标
0
投稿
猜你喜欢
链接与文本标签们
2008-04-04 18:07:00
纯CSS圆角框2-透明圆角化背景图片
2009-12-11 19:10:00
如何获得上一个月份是几月?
2009-11-23 20:38:00
MSSQL数据库还原图解教程
2009-01-12 17:58:00
RHEL下架设MYSQL集群
2008-12-24 16:05:00
适合所有网站的rss和xml聚合功能asp代码
2011-04-06 11:19:00
[整理版]防止Access数据库被下载的9种方法
2007-08-10 09:31:00
asp下为什么韩文字后面显示分号?
2011-03-10 11:07:00
SQLserver 2000中出现“指定的服务并未以已安装的服务存在 解决方案
2011-04-27 14:33:00
如果用JS得到字符串中出现次数最多的字母
2007-12-03 21:01:00
css网页下拉菜单制作方法(1):基本原理
2007-02-03 11:39:00
asp如何检测HTTP表头信息?
2010-06-28 18:20:00
VML模拟Rose画流程图代码
2008-09-02 10:58:00
SQL语句删除2条重复数据一条保留一条
2012-07-11 15:51:44
asp如何用Access加密页面?
2010-06-10 18:41:00
ASP如何操作Excel(读取,输出)
2007-08-21 19:57:00
delete from online where datediff
2009-06-07 18:46:00
asp如何判断一个电子信箱格式是否有效?
2010-01-12 20:18:00
oracle 在一个存储过程中调用另一个返回游标的存储过程
2009-09-26 18:54:00
404页面设计一样可以闪光
2007-08-19 15:09:00