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
投稿猜你喜欢
- 对于路径中含有中文的图像，直接用cv2.imread读取会报错，上次看到有大佬使用cv2.imdecode就可以正常读取，有点好奇，所以今天
亲身实践安装mysql，用时居然花费了三个小时，在有那么多教程的情况下，依然在不该花费时间的路上浪费了太多时间。希望这篇文章能够帮助大家少走- 分页显示是页面常用技术，可用下列代码来实现：<％page=Request.QueryString("page&q
- 虽然Golang的GC自打一开始，就被人所诟病，但是经过这么多年的发展，Golang的GC已经改善了非常多，变得非常优秀了。以下是Golan
- SELECT语句，去除某个字段的重复信息，例如： 表名：table id uid username message dateline 1 6
- ASP中给函数传参确实是个麻烦事，当参数个数特别多的时候（比如有七八个或者更多的参数个数）差不多就要眼冒金星了，一个个的数吧。而且要命的是参
- 首先来解释一下SpringBoot首页设置的三种方式1.SpringBoot默认首页设置编写一个最简单的html文件 index.html&
- 摘要数据分析与建模的时候大部分时间在数据准备上，包括对数据的加载、清理、转换以及重塑。pandas提供了一组高级的、灵活的、高效的核心函数，
- Python自动化测试-使用Pandas来高效处理测试数据一、思考1.Pandas是什么？功能极其强大的数据分析库可以高效地操作各种数据集c
- 1. 列表使用sum, 如下代码，对1维列表和二维列表，numpy.sum(a)都能将列表a中的所有元素求和并返回，a.sum()用法是非法
- MGR全称MySQL Group Replication（Mysql组复制），是MySQL官方于2016年12月推出的一个全新的高可用与高扩
- 这是一份来自网络的代码，经过了我的修改和验证。 首先我的运行环境是Python3.7，需要安装PyUserInput库。直接上代码
- MySQL5.6.40在CentOS7 64下安装过程1）卸载之前安装的mysqlrm -rf /usr/local/mysqlrm -rf
- 硬币兑换问题：给定总金额为A的一张纸币，现要兑换成面额分别为a1,a2,....,an的硬币，且希望所得到的硬币个数最少。# 动态规划思想
- 前言：不用改掉系统python2.7 ，原来是python2.7，我们还进行python2.7的保留1.编译前准备其他库的安装(使用sudo
- 今天，使用各种所见即所得工具制作主页已经是一件非常容易的事情了。但是了解HTML源代码和语法，无疑对我们制作主页有更大的帮助，也可以使用户能
- 1、CSV（1）写csv文件import csvdef writecsv(path,data): with open(path,
- 基本示例?计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用&rdquo
- 代码很简单，功能也很简单 =w=webpage2pdf#!/usr/bin/env python3import systry: from P
- 介绍本文主要介绍Python中列表生成式的基本知识和使用生成列表要生成list [1, 2, 3, 4, 5, 6, 7, 8, 9, 10
