饮水思源 - 文章阅读  [讨论区: WebDevelop]
[转寄/推荐][转贴][删除][修改][设置可RE属性][上一篇][返回讨论区][下一篇][回文章][同主题列表][同主题阅读][从这里展开]
发信人: pw(晓来雨过|不用迅雷|远离校内), 信区: WebDevelop
标  题: 谈谈CSS图像替换技术
发信站: 饮水思源 (2008年12月26日15:04:12 星期五), 站内信件

最好看原文~ http://www.ttyc.com.cn/image-replacement.html

图像替换技术是CSS的基础技术之一。

考虑这样一种情况:

  <h4>Image Replacement</h4>

效果:

Image Replacement

现在希望用一张图片替换掉文字内容,使得网页更加丰富多彩(很多情况下是为了表现
出特殊字体效果)。做到这种效果:


方法有很多种,最原始的方法是03年3月,Douglas Bowman提出的Fahrner图像替换(Fa hrner Image Replacement,FIR),该方法需要使用一个span标签围住文本,然后隐藏 掉span标签,同时设置容器的背景图像。代码如下: 1 2 3 4 5 6 7 8 #container{ background: url(wp-content/uploads/2008/12/image.png) top left no-repeat; width: 200px; height: 31px; } #container span{ display:none; } 1 <h4 id="container"><span>Image Replacement</span></h4> 效果: Image Replacement 优点是原理简单,缺点是当用户关闭图片显示,开启CSS(image down/css on)的时候 ,屏幕上将什么都不会显示;在很多屏幕阅读器中读取不到文字内容(在国内这个问题 不常见,至少我没见过什么屏幕阅读器)。 因此在FIR之后,不断地有人提出更好的解决方法试图解决image down/css on和屏幕阅 读器问题。为了纪念Fahrner同学,这类方法统一称作FIR。Dave Shea专门做了一个页面 用于整理FIR,期待有一个方法出现可以优美的解决这些问题。遗憾的是,至今没有一个 方法是完美的。 目前FIR有三种较常用的方法: 1. 经典FIR,设法隐藏文字内容,除了上文提到的方法以外,Radu Darvas、Dwyer、 Lindsay也提出过类似的方法 2. 设置边距或缩进将文字弹走,Radu、Leahy/Langridge、Phark的方法都是基于这 种思想的 3. 用额外元素覆盖住文字,Gilder/Levin提出了这种思想,Shea改进了它 经典FIR 经典FIR均无法解决在关闭图像打开CSS情况下文字的显示,只是对屏幕阅读器和兼容性 做出了一系列的改进。这类方法的特点和最大的缺点是需要添加额外的<span>标签。而 且其中的某些方法都屏幕阅读器不友好。 弹出文字式FIR 为了解决额外标签的问题,Radu换用一个更加巧妙的思路,在元素原有的宽度x上外加一 个很大的宽度y,再将元素的左边距设置为-y,即将文字往左拉到屏幕外侧。 1 2 3 4 5 6 #container{ background: url(wp-content/uploads/2008/12/image.png) top left no-repeat; width: 2200px; height: 31px; margin-left: -2000px; } 1 <h4 id="container">Image Replacement</h4> 此方法开创了一种新的思路,在这种思路下,Leahy/Langridge优化了这种方法。新的方 法不要求设置元素的宽度,而是设置元素的高度和overflow属性,再设置上内边距将文 字挤到可现实区域之外。 1 2 3 4 5 6 7 #container{ background: url(wp-content/uploads/2008/12/image.png) top left no-repeat; height: 0px !important; height /**/:25px; overflow: hidden; padding-top: 31px; } 1 <h4 id="container">Image Replacement</h4> 还不够,Phark创新性的使用text-indent属性将这类方法做到了极致: 1 2 3 4 5 #container{ background: url(wp-content/uploads/2008/12/image.png) top left no-repeat; height: 31px; text-indent: -5000px; } 1 <h4 id="container">Image Replacement</h4> 但是无论怎么做,这类方法都只解决了屏幕阅读器和额外标签问题,在关闭图像打开CS S的情况下这类方法均不能正常工作。 额外元素覆盖式FIR 为了解决关闭图像打开CSS条件下FIR正常退化的问题,Gilder/Levin提出了通过一个额 外的<span>元素覆盖住文字的方法。与经典FIR不同,这里要求额外的<span>标签不包围 住文字而是位于文字内容之前: 1 2 3 4 5 6 7 8 9 10 11 #container{ width: 200px; height: 31px; position: relative; } #container span{ background: url(wp-content/uploads/2008/12/image.png) top left no-repeat; position: absolute; width: 100%; height: 100%; } 1 <h4 id="container"><span></span>Image Replacement</h4> 繁琐的代码下,终于完美的解决了关闭图像打开CSS问题。但,新的问题随之而来,即替 换图像不能为透明的,否则会露出下面的文字内容。除此之外,文字内容没有被直接包 含于任何节点之内,可能会给前端开发带来意想不到的麻烦。 sFIR - new hope? Mike Davidson和Shaun Inman提出了一种新的iFIR技术。该方法使用JavaScript搜索文 档中特定节点,将其中的内容替换成一小段Flash。 下面是《精通CSS》一书中对该技术的介绍: Flash允许将字体嵌入SWF文件,所以他们并不把文本换成图像,而是用Flash文件替 换文本。进行这一替换的方法是使用JavaScript搜索文档,找到特定元素或者具有特定 类名的元素中的所有文本。然后,JavaScript将文本替换为一个小的Flash文件。接下来 是真正精明的部分。这种技术并不为每段文本创建单独的Flash文件,而是将被替换的文 本放回一个重复的Flash文件中。因此,触发图像替换所要做的只是添加一个类,Flash 和JavaScript会完成余下的工作。另一个好处是Flash文件中的文本是可搜索的,这意味 着可以轻松地复制它。 iFIR方法的细节可以在Shaun Inman的主页上找到。 Mike Davidson改进了这个方法,创建了sFIR方法。可以在他的主页上找到相关介绍。 有兴趣的同学可以去查看《精通CSS》中的相关介绍。使用Flash替代的缺点在于改方法 要求JavaScript和Flash支持,并且Flash会远大于一副普通图片,下载时会造成延迟, 在较慢的电脑上页面会出现闪烁甚至停滞。 没有完美的方法 是的,就目前来讲,没有一种FIR技术是完美的。除非有一天,CSS可以提供一个属性叫 做frontground-image。在这之前,我们只好分析用户的需要,用最小的代价换取效果。 例如,在移动设备上可以用Gilder/Levin的方法,因为一般移动设备商不会使用透明图 片。而在国内,屏幕阅读器还没普及的情况下,牺牲屏幕阅读器也是可以考虑的。 参考文章: 1. 《Revised Image Replacement》. Dave Shea. http://www.mezzoblue.com/tes ts/revised-image-replacement/ 2. 《CSS禅意花园》. Dave Shea, Molly E. Holzschlag. 人民邮电出版社 3. 《精通CSS:高级Web标准解决方案》. Andy Budd. 人民邮电出版社 -- ※ 来源:·饮水思源 bbs.sjtu.edu.cn·[FROM: 211.80.90.21] ※ 修改内容:·pw 于 12月26日15:04:31 修改本文·[FROM: 211.80.90.21]

[转寄/推荐][转贴][删除][修改][设置可RE属性][上一篇][返回讨论区][下一篇][回文章][同主题列表][同主题阅读][从这里展开]