发信人: 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]
|