建站過過程中朋友喜歡把網站名稱用H1表示,但從美觀考慮，要用logo圖片來代替h1，這時需要隱藏h1內的這段文字，但又不能對搜索引擎不友好，否則就失去了定義h1標簽的意義。
在CSS中如何以圖代字，找了一下CSS隱藏文字的方法，有以下幾條：
1、display:none;
這個大家普遍說法是，搜索引擎可能認為被隱藏的文字屬於垃圾信息而被忽略，不為隱藏的對象保留物理占位空間。GG也搜CSS文件？不過如果用這個方法，<h1>如何設計，也是難題。
2、visibility:hidden;
和display:none;相對應，為隱藏的對象保留物理占位空間。
3、overflow:hidden;
這是網上用的最多的方法，但是我認為對於隱藏h1標簽的“站點名稱”文字，不太合適，原因我在最后說。
.texthidden{
display:block;
overflow:hidden;
width:0;
height:0;
}
4、positon:absolute;
用絕對定位將其推出可視區，不過雖然可視性不存在，但仍占據物理空間，與隱藏文字的宗旨相背，另外我個人不喜歡用絕對坐標定位magin這個屬性，margin在不同瀏覽器中總是帶來不可預料的Bug。
.texthidden{
positon:absolute;
margin-top:-9999px;
margin-left:-9999px;
}
5、text-indent:-9999px；
把h1作為一個塊來顯示（display:block;），指定長寬（和圖片一樣大小），然后指定h1的背景圖片，也就是將我們需要的圖片作為h1這個標簽的背景。而h1標簽中插入的，仍然是作為字符形式出現的博客標題，然后用text-indent:-9999px;將文字甩到屏幕看不到的地方，9999px應該是足夠了，誰的屏幕也沒那么大吧。
h1a{
height:30px;
width:165px;
float:left;
text-indent:-9999px;
background-image:url(images/logo.gif);
background-repeat:no-repeat;
display:block;
position:relative;
}
<h1>
<ahref=http://www.seo100.net/>百度優化</a>
</h1>
總結一下：
如果不考慮搜索引擎的因素，方案一無疑最佳的，適合內網站點使用，並不是一無是處。
方案二，可以用在特殊的占位場合，了解一下，沒壞處。
方案三，網上都說好，如果不是h1標簽，還真可以用它。
方案四，嗯，前面說我不喜歡。
方案五，在h1使用上語義明確，符合語義化定義。text-indent就是首行縮進，大家都在中文段落，首行空兩格用過它。這里通過負值縮進，使文字超出可視區，而這時h1下的背景就顯示出來了，h1中包含的<a>標簽又不影響使用，對於隱藏文字“站點名稱”應該是最佳方案了。但對於多段文字的隱藏這個方法就不適合了。
這里還有個問題，就是點擊<h1><a>鏈接時，會產生一個虛線框，對於IE還好，沒什么問題，虛線框只是在背影圖片大小。但是Firefox就有些麻煩，它把縮進的文字范圍也包含進來了，這樣不是很美觀。
於是需要屏掉點擊時產生的虛線框，IE和FF屏虛線框方法不一樣。IE采用的遍歷方法(HTC,css表達式)有些耗系統資源，正好我們只需要隱藏FF下的虛線框就行了，IE就不管了，說一下Firefox如何去掉鏈接的虛線框的方法。
a{
outline:none;/*去掉Firefox點擊時產生的虛線框*/
}
-9999px 使瀏覽器畫一個9999寬的盒子... 會降低一些性能。
更有效率的方法（試過了，h1也能用）：
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
From:http://ajhcc.blogbus.com/logs/41836252.html