怎樣用CSS隱藏圖片背景的文字內容

這次的案例是如何用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中文網其它相關文章！

相關閱讀：

什麼是js深拷貝和淺拷貝及其實作方式

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

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

#

以上是怎樣用CSS隱藏圖片背景的文字內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！