CSS——图片替换方法比较
图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示。其意义在于便于做网站优化(SEO),文字才是搜索引擎寻找的主要对象。
经典的替换方法:
- Fahrner图片替换法(FIR)
源码:
Html:
<h1 id="fir"><span>Fahrner Image Replacement</span></h1>
CSS:
#fir {
width: 287px;
height: 29px;
background: url(fir.gif)
no-repeat;
}
#fir span {
display: none;
}
解释:
首先添加一个<span>标签,然后使用<span>标签的display属性把文字隐藏起来,最后指定<h1>的背景图片。
优点:使用CSS而不是标记语法提供图片,更改图片只需更改CSS。
缺点:(1)需要一组不具备任何语义的<span>标签才能运作(2)display属性影响屏幕阅读器使用者(3)关闭浏览器显示图片,同时启用CSS支持时,文字图片均不可显示。
2. Leahy/Langridge图片替换法(LIR)
源码:
Html:
<h1
id="lir">Leahy/Langridge Image Replacement</h1>
CSS:
#lir {
padding-top:image
height;
overflow:hidden;
background:url(lir.gif)
no repeat;
height:0
!important; //针对大多数浏览器
height:image
height; //针对IE5
}
解释:
首先将padding-top设置为图片高度,将h1高度设置为0(IE5下设置为图片高度),根据盒子模型可知,文字内容将被排挤到指定高度之外,同时设置overflow:hidden将溢出文字隐藏。
优点:(1)去掉冗余的<span>标签(2)不影响屏幕阅读器使用者
缺点:(1)关闭浏览器显示图片,同时启用CSS支持时,文字图片均不可显示(2)要为IE5 for Windows使用盒模型Hack。
3. phark图片替换法
源码:
Html:
<h1
id="phark">The Phark Method</h1>
CSS:
#phark {
height: image height;
text-indent: -5000px;
background: url(phark.gif) no-repeat;
}
解释:设置text-indent属性为很大的负值,将文字显示在屏幕之外,达到隐藏的效果。
优点:(1)不需要额外标签(2)不影响屏幕阅读器使用者
缺点:关闭浏览器显示图片,同时启用CSS支持时,文字图片均不可显示
CSS——图片替换方法比较的更多相关文章
- css图片替换方法
图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示.其意义在于便于做网站优化(SEO),因为文字才是搜索引擎寻找的主要对象. https://www.cn ...
- CSS——图片替换方法:Fahrner图片替换法(FIR)
Html: <h1 id="fir"><span>Fahrner Image Replacement</span></h1> CSS ...
- 几种垂直居中的方式及CSS图片替换技术
由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px 0; 以上方法针对块级元素和 ...
- CSS图片垂直居中方法
让div里面的多行文本垂直居中的方法: div{height:100px;width:100px;border:solid 1px red;text-align:center; display:tab ...
- css图片替换文字
含义: 图像替代,就是像我们在平时将文本添加到文本中,然后通过css隐藏文本在它的位置上显示一个背景图片,这样,搜索引擎仍然可以搜到HTML文本,即使我们禁用css后,文本时仍然是可以显示的. 引用& ...
- CSS图片垂直居中方法整理集合
原帖链接:http://bbs.blueidea.com/thread-2666987-1-1.html 1.因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法 ...
- CSS样式,雪碧,图片替换,渐变小析
Css基础2: 相对长度单位:em,rem,px,%绝对长度单位:厘米等(不用)颜色单位:rgb,rgb的百分比,16进制(#),颜色名称字体:font-size:为了更好适合点阵,尽量使用偶数fon ...
- 【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】
1.onclick事件 <button type="button" onclick="alert('Welcome!')">点击这里</but ...
- css网页中设置背景图片的方法详解
在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...
随机推荐
- java基础-修饰符
下列哪个修饰符可以使在一个类中定义的成员变量只能被同一包中的类访问?(B) A:private B:无修饰符 C:public D:procted 名称 说明 备注 public 可以被 ...
- Windows 8.1 正式版微软官方原版镜像下载(新增10/17新版下载)
中文版:中国区OEM预装版本,特定国家版,锁定语言,其它功能和核心版没有区别.简体中文单语言版:锁定语言,其它功能和核心版没有区别.专业版+核心版[零售版][推荐]:镜像内包含专业版(Professi ...
- 【高级】C++中虚函数机制的实现原理
多态是C++中的一个重要特性,而虚函数却是实现多态的基石.所谓多态,就是基类的引用或者指针可以根据其实际指向的子类类型而表现出不同的功能.这篇文章讨论这种功能的实现原理,注意这里并不以某个具体的编译器 ...
- 虚拟机的静态内部 IP 地址
这是什么? 借助最新的 PowerShell 版本,您现在能够定义和配置特定的内部 IP 地址,该地址可以静态分配给部署在虚拟网络中的 IaaS 虚拟机.使用此功能,您可以直接为虚拟机配置内部 ...
- hdoj 2546 饭卡(0-1背包)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2546 思路分析:该问题为0-1背包问题的变形题:问题求余额最少,设开始的余额为V,则求得用V-5可以买 ...
- TP的SDK的调用
1,SDK简介 本SDK是基于ThinkPHP开发类库扩展,因此只能在ThinkPHP平台下使用(ThinkPHP版本要求2.0以上).DEMO中用到了控制器分层,因此运行DEMO需使用ThinkPH ...
- js 定义类对象
//定义类 //方式一 function A_class(arg1,arg2){ this.arg1=arg1; this.arg2=arg2; ...
- ios数组基本用法和排序
1.创建数组 // 创建一个空的数组 NSArray *array = [NSArray array]; // 创建有1个元素的数组 array = [NSArray arrayWithObject: ...
- js中if的简写方法
http://transitions1020.com/# 太帅! <script type="text/javascript"> 如果你想写 if (!false) { ...
- ADO.NET知识的运用一(Day 26)
哈哈,又到了总结的时间了,来回顾一下今天主要学了关于ADO.NET的哪些知识吧.(这次学的ADO访问数据库主要以访问SQL数据库为主) 理论: 首先我们要知道为什么要学习ADO.NET? 因为我们之 ...