CSS代码大致如下:
#header {
padding: 25px 0 0 0;
overflow: hidden;
background-image: url(sample-opaque.gif);
background-repeat: no-repeat;
height: 0px !important;
height /**/:25px;
}
缺点:
同样在关闭图像,开启CSS的情况下无法获取内容, 而且由于IE的Box原型问题, 需要用到Hack. 详见译文. Phark 方法
利用 text-indent 的特性来达到隐藏文字的效果.
HTML
<h3 id="header">
Revised Image Replacement
</h3>
CSS代码大致如下:
#header {
text-indent: -100em;
overflow: hidden;
background: url(sample-opaque.gif);
height: 25px;
}
缺点:
同样不能显示在关闭图像,开启CSS的情况下, 而且无法在IE5中运行. Phark 方法2
修复了Phark 1中Safari显示滚动条的问题, 和IE5中无法运行的问题.
HTML
<h3 id="header">
Revised Image Replacement
</h3>
CSS代码大致如下:
#header {
text-indent: -5000px;
background: url(sample-opaque.gif);
height: 25px;
}
缺点:
同样不能显示在: 关闭图像,开启CSS的情况下. 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 方法
