這次的案例是如何用CSS隱藏圖片背景的文字內容，我們先使用使用background背景是將圖片設為背景顯示；然後使用text-indent縮排是隱藏a連結內容和連結標籤是對文字設定錨文本連結。下面就是實例案列。
實例案例描述
這裡便於觀察CSS DIV案例效果，我們就來實現的網站的佈局。
擴充閱讀：html img圖片
1、CSS 程式碼：
h1#logo{
float:left;width:165px;height:60px;
background:url(http://www.php.cn) no-repeat 0 0}
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.php.cn/" title="PHP中文网"> </a> </h1>
案例效果
在瀏覽器顯示結果，大家可跟著給出實例程式碼思考並完成DIV+CSS實踐，在瀏覽器中測試測試。
重要解釋：本來HTML裡h1標籤內設定了文字內容，但是設定「text-indent:-9999px」樣式，實質是讓文字向左平移9999px距離，自然在一般解析度顯示器上無法看到9999px邊緣內容，自然使用此CSS技巧實現了文字隱藏同時，背景圖片顯示正常。
總結
我們讓圖片作為CSS背景、同時上面放上文字，又讓文字隱藏，這個對於SEO來說比較實用。但實際操作時候注意圖片大小高寬，在設定物件DIV盒子時候注意高度寬度適合，並使用CSS background背景樣式、text-indent、css display等樣式單字實作。根據案例多實例實踐即可學會。如果不想用A錨文字隱藏圖片上文字，可以將a標籤換成span標籤、div標籤、em標籤都可以效果相同。
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
#以上是怎樣用CSS隱藏圖片背景的文字內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！
