Leahy/Langridge 方法
利用 overflow:hidden 以及 padding 的特性,将文字达到隐藏的效果.
HTML代码如下:
＜h3 id="header"＞
Revised Image Replacement
＜/h3＞
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的情况下.
|
