實例案例描述

這里便于觀察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>

<!-- html注釋：這里便于截圖觀察，我們將HTML代碼換行排版 -->

案例效果

在瀏覽器顯示結果，大家可跟著給出實例代碼思考并完成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中文網其它相關文章！

相關閱讀：

什么是js深拷貝和淺拷貝及其實現方式

詳解前端響應式布局、響應式圖片，與自制柵格系統

a:active加動畫點擊無效的解決方案

以上就是怎樣用CSS隱藏圖片背景的文字內容的詳細內容，更多請關注php中文網其它相關文章！