CSS——图片替换方法比较

图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示。其意义在于便于做网站优化(SEO),文字才是搜索引擎寻找的主要对象。

经典的替换方法:

  1. 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支持时,文字图片均不可显示

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小蠢驴iOS专题

iOS中Cell约束--使用xib实现多label的自动约束--高度随内容自适应

4016
来自专栏地方网络工作室的专栏

图片自适应父元素大小,并左右上下居中的css方法

图片自适应父元素大小,并左右上下居中的css方法 前言 这种效果多见于矩形盒子里面调用不规则的图片,希望能够达到的效果。这个效果可以很简单的用css来实现,虽然...

2438
来自专栏闻道于事

正式学习第一天下午——基础标签及其属性

今天下午学习了html中的基础标签及其属性。以下面的HTML代码为例。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

2665
来自专栏python3

tkinter -- 文本的多行显示

使用 width 和 heigth 来指定控件的大小,如果指定的大小无法满足文本的要求,

1665
来自专栏青青天空树

认识基本的mfc控件

  几乎可以在每个windows程序中都看到按钮、复选框、文本框以及下拉列表等等,这些都是控件。而且很多常用的控件已经内置到操作系统当中了,在Visual C+...

972
来自专栏一场梦

给图片或文字加上鼠标悬浮时旋转动画

2493
来自专栏web开发

img标签实现和背景图一样的显示效果——object-fit和object-position

不知大家在做前端页面的时候,有没有遇到类似这样的问题:有一个不是正方形的图片,可能是宽度大于高度的,也可能是高度大于宽度的,而你又并不想用背景图的方式来做,要实...

4016
来自专栏河湾欢儿的专栏

04-修改 维护

想要改变图标的位置? 新功能,加个图标? 画布太大,文件空白太多? 图标多余,要删除?

992
来自专栏偏前端工程师的驿站

JS魔法堂:通过marquee标签实现信息滚动效果

一、前言                                      有限的空间展现无限的内容,这是滚动最常用到的地方。根据信息滚动效果我们可以有...

2527
来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——GifView控件的使用方式

获取或设置获取图像模式,默认设置为“File”,表示直接从文件中读取图像,如图 4;

922

扫码关注云+社区

领取腾讯云代金券