Dwyer 方法
经典FIR的一种变体, 利用overflow:hidden 的特性, 使得所有设备都能获取信息, 包括非可视化浏览器.
HTML代码如下:
＜h3 id="header"＞
＜span＞Revised Image Replacement＜/span＞
＜/h3＞
CSS代码大致如下:
#header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}
#header span {display: block;width: 0;height: 0;overflow: hidden;}
缺点:
同样的不能显示在: 关闭图像,开启CSS的情况下, 仍旧需要额外的无语义的span标签.
Gilder/Levin 方法
解决了在关闭图像 开启CSS情况下的显示问题, 并且使得几乎所有的设备都可以获取到文本信息.
HTML代码如下:
＜h3 id="header"＞
＜span＞＜/span＞Revised Image Replacement
＜/h3＞
CSS代码大致如下:
#header {width: 329px;height: 25px;position: relative;}
#header span {background: url(sample-opaque.gif) no-repeat;position: absolute;width: 100%;height: 100%;}
缺点:
使用完全空白的非语义标签span, 替换用图片如果是透明背景的话, 文字没办法被隐藏.
Lindsay 方法
Lindsay将文字设置为1px, 并将文字颜色设置成替换用图片背景的颜色.
HTML代码如下:
＜h3 id="header"＞
Revised Image Replacement
＜/h3＞
CSS代码大致如下:
#header {
background: url(sample-opaque.gif) no-repeat;
width: 329px;
height: 25px;
font-size: 1px;
color: #xxxxxx;
}
缺点:
只能用在纯色背景的替换用图片的情况下, 而且在关闭图像 开启CSS的情况下同样无法获取信息.
Shea 加强版
Shea为容器加上了title属性, title中包含将被隐藏的文字, 通过这种方法来达到一种鼠标激活工具提示的一种效果来让用户获取信息.
HTML代码如下:
＜h3 id="header" title="Revised Image Replacement"＞
＜span＞＜/span＞Revised Image Replacement
＜/h3＞
CSS代码如下:
#header {width: 329px;height: 25px;position: relative;}
#header span {background: url(sample-opaque.gif) no-repeat;position: absolute;width: 100%;height: 100%;}
缺点:
多余的空白无语义span标签...
以上几乎是现存所有的图像替换方法, 各有优缺点, 按照自己的情况选用吧.
|
