CSS樣式隱藏圖片作為背景圖片上方的文字內容

三、實際使用案例   -   TOP
接下來DIVCSS5帶領大家實現DIVCSS5網站LOGO布局（實現logo圖片上文字內容隱藏同時超鏈接保留）。
實例案例描述 這裏便於觀察CSS DIV案例效果，我們就來實現DIVCSS5的網站LOGO布局。 LOGO圖片地址：http://www.divcss5.com/img201301/divcss5-logo-2013.gif 擴展閱讀：html img圖片
1、CSS 代碼：

 h1#logo{ 
float:left;width:165px;height:60px; 
background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0} /* CSS注釋： float設置浮動，並設置CSS寬度和CSS高度 CSS背景 
為了便於截圖我們將CSS代碼換行排版 
*/  
h1#logo a{display:block;width:100%;height:100%;text-indent:-9999px}
 
/* css注釋：display:block是讓#logo內A標簽成塊顯示，並以上級100%高度和100%寬度顯示 
text-indent此屬性為CSS 縮進樣式，我們設置為負值的9999px，也就隱藏了a標簽內文字 
這樣一來就顯示了h1標簽背景圖片，隱藏了文字又實現了A錨文本超鏈接 
*/ 

2、HTML代碼：

 <h1 id="logo"> 
<a href="http://www.divcss5.com/" title="DIVCSS5：DIV CSS學習教程與資源分享平台"> 
DIV+CSS學習與資源分享平台 
</a> 
</h1>  
<! html注釋：這裏便於截圖觀察，我們將HTML代碼換行排版 > 

3、案例效果 隱藏圖片上文字實例截圖
在瀏覽器顯示結果，大家可跟著DIVCSS5給出實例代碼思考並完成DIV+CSS實踐，在瀏覽器中測試測試。
重要解釋：本來HTML裏h1標簽內設置了文字內容，但是設置“text-indent:-9999px”樣式，實質是讓文字向左平移9999px距離，自然在一般分辨率顯示屏上無法看到9999px邊緣內容，自然使用此CSS技巧實現了文字隱藏同時，背景圖片顯示正常。
四、DIVCSS5總結   -   TOP
我們讓圖片作為CSS背景、同時上面放上文字，又讓文字隱藏，這個對於SEO來說比較實用。但實際操作時候注意圖片大小高寬，在設置對象DIV盒子時候注意高度寬度適合，並使用CSS background背景樣式、text-indent、css display等樣式單詞實現。根據DIVCSS5案例多實例實踐即可學會。如果不想用A錨文本隱藏圖片上文字，可以將a標簽換成span標簽、div標簽、em標簽均可效果相同。