专栏首页Young DreamerCSS——图片替换方法比较

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 条评论
登录 后参与评论

相关文章

  • webpack4:连奏中的进化

    用户1217459
  • 如何使用Node.js编写命令工具——以vue-cli为例

    vue-cli全局安装之后,提供了vue命令和vue init、vue list、vue build三个子命令,通过命令可以搭建基于vue.js的脚手架项目。本...

    用户1217459
  • Vue Router的懒加载路径

    用户1217459
  • 吊炸天!机器人造访白宫,奥巴马亲自接见

    镁客网
  • [javaSE] 网络编程(UDP通信)

    获取DatagramPacket对象,new出来,构造参数:byte[]数组,int长度,InetAddress对象,int端口

    陶士涵
  • Forefront For Office

    上一篇我们介绍了Office Communications Server2007安装和Office Communications Se ver Beta 3的安...

    py3study
  • 你无法检测到触摸屏

    无论你可能会怎么想,目前,在浏览器里可靠地检测当前的设备是否有一个触摸屏是不可能的。

    疯狂的技术宅
  • 腾讯云员工为何天桥摆摊,真相竟然是。。。

    2020年6月3日 当你路过深南大道某天桥 会发现在往常只有路人来来往往的天桥上 竟然有人开始摆地摊 走近一看 发现这位小哥摆地摊卖的东西有点不一样了: .x...

    腾讯云域名与DNS解析团队
  • PHP与Flash as2.0简单交互

    flash文档: mylist = new Object(); mylist.click = function(event:Object){       u...

    苦咖啡
  • Windows系统下hosts文件工作原理(转)

    hosts 首先说明下, hosts文件没有后缀 一. Hosts文件的位置 很多用户都知道在Window系统中有个Hosts文件(没有后缀名),在Wind...

    Dar_Alpha

扫码关注云+社区

领取腾讯云代金券