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
投稿
猜你喜欢
浅谈python中的多态
2022-09-13 16:45:40
python基于机器学习预测股票交易信号
2021-09-16 02:48:05
macOS M1(AppleSilicon) 安装TensorFlow环境
2022-05-26 04:03:34
Python打印输出数组中全部元素
2022-08-07 19:35:12
解决Jupyter 文件路径的问题
2022-09-10 09:15:59
Python项目跨域问题解决方案
2022-12-01 17:39:32
Python数据分析库pandas基本操作方法
2022-07-17 23:15:18
python3使用diagrams绘制架构图的步骤
2022-08-27 12:42:34
Python 中pandas索引切片读取数据缺失数据处理问题
2021-06-02 05:13:28
sql 多条件组合查询,并根据指定类别找出所有最小子类别的SQL语句备忘
2024-01-20 09:01:50
Python爬取豆瓣数据实现过程解析
2022-01-27 09:12:20
sql not in 与not exists使用中的细微差别
2024-01-26 09:40:43
MSSQL木马修复,中木马后的处理方法
2024-01-21 10:47:13
python Crypto模块的安装与使用方法
2022-09-17 15:19:01
30分钟就入门的正则表达式基础教程
2024-05-13 10:37:40
在Python中操作文件之read()方法的使用教程
2021-10-28 19:23:46
必备的JS调试技巧汇总
2023-08-07 06:26:50
Python学习之加密模块使用详解
2022-06-01 03:58:03
pandas求两个表格不相交的集合方法
2022-03-08 01:15:41
MySQLMerge存储引擎
2024-01-14 07:39:25