注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

邰增涛博客

www.xazcwl.com -- 爱生活,爱技术,将web编程进行到底!!!

 
 
 

日志

 
 
关于我

西安增创网络科技有限公司,专注网站建设、手机网站、商城网站、微网站开发、小程序开发、APP开发!!!

网易考拉推荐

{ Image replacement }CSS实现图片替换文字  

2010-07-10 19:19:13|  分类: web标准 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

不论是对浏览者还是对搜索引擎,文字都是最佳的页面内容展示方式,但是,由于字体等原因的限制,纯文字的展示渐渐无法满足爱美的设计师的要求。

于是,出现了通过 CSS 来实现用图片替换文字的方法,这种方式既能实现页面上各种丰富的效果,又能满足搜索引擎优化的需要。因此,深受网页设计师的喜爱,本文介绍了几种常见的图文替换技术。

  • Fahrner Image Replacement (FIR)
  • Phark 的方法
  • Gilder/Levin 的方法 (推荐)

Fahrner Image Replacement (FIR)
这是最早出现的图文替换技术,是由 Todd Fahrner 提出的,非常容易理解:

HTML 代码:

<h1><span>Hello World</span></h1> 

CSS 代码:

<style type="text/css"> h1{ background:url(hello_world.gif) no-repeat;     width: 150px;     height: 35px; } span {  display: none; } </style> 

代码非常明白:先将图片应用在 H1的背景中,然后将 SPAN 的标签隐藏。但是这种方式有个问题,就是当图片无法显示时,将导致这个区域没有任何内容。同时,使用 display:none 的方式隐藏的内容,将被许多主流屏幕阅读器忽略,从而造成可用性问题,因此,应该尽量避免使用。

Phark 的方法

这种技术是由 Mike Rundle 提出的,好处是不需要额外的标签:

HTML 代码:

 <h1> Hello World </h1> 

CSS 代码:

<style type="text/css"> h1{     text-indent: -9999px;     background:url(hello_world.gif) no-repeat;     width: 150px;     height:35px; } </style> 

代码也非常简单,通过文本缩进,将文字隐藏,但是,当图片无法显示时,依然存在 FIR 的问题。

 Gilder/Levin 的方法

这种技术是由 Tom Gilder 和 Levin Alexander 共同提出的,这也许是一个最完善的图文替换技术了:

HTML 代码:

 <h1><span></span>Hello World </h1> 

CSS 代码:

<style type="text/css"> h1 {     width: 150px;     height: 35px;     position: relative; }   h1  span {     background: url(hello_world.gif) no-repeat;     position: absolute;     width: 100%;     height: 100%; } </style> 

首先,将 H1 的 position 设为 relative ,这样将使 H1 里面的元素定位以 H1 为参照,然后将 SPAN 元素绝对定位,撑满整个 H1 区域,同时将背景图应用在 SPAN 标签里面;这种方法的原理是将 SPAN 标签覆盖在文字内容上面,一旦 SPAN 里面的背景图无法显示,将显示下层的文字内容,不影响正常使用。但是,此方法也有一个缺陷,就是背景图不能透明,否则将透出下面的文字。
  评论这张
 
阅读(106)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018