Leahy/Langridge 方法
利用 overflow:hidden 以及 padding 的特性,將文字達到隱藏的效果.
HTML代碼如下:
�。糷3 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;
}
缺點:
同樣在關(guān)閉圖像,開啟CSS的情況下無法獲取內(nèi)容, 而且由于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;
}
缺點:
同樣不能顯示在關(guān)閉圖像,開啟CSS的情況下, 而且無法在IE5中運行.
Phark 方法2
修復(fù)了Phark 1中Safari顯示滾動條的問題, 和IE5中無法運行的問題.
HTML代碼如下:
�。糷3 id="header"＞
Revised Image Replacement
＜/h3＞
CSS代碼大致如下:
#header {
text-indent: -5000px;
background: url(sample-opaque.gif);
height: 25px;
}
缺點:
同樣不能顯示在: 關(guān)閉圖像,開啟CSS的情況下.
|
