css圖片替換文字

含義： 圖像替代，就是像咱們在平時將文本添加到文本中，而後經過css隱藏文本在它的位置上顯示一個背景圖片，這樣，搜索引擎仍然能夠搜到HTML文本，即便咱們禁用css後，文本時仍然是能夠顯示的。

 

引用《精通css》中的一段解釋：

HTML文本由不少的優勢。文本能夠被搜索引擎讀取，開發人員能夠對其進行復制和粘貼，而且在瀏覽器中改變字體大小後，它也會改變。所以不少設計人員都想盡可能的採用HTML文本而不是文本的圖像，可是遺憾的是，頁面設計人員對於文本有有限的選擇，儘管能夠經過css來控制版面可是有不少字體的效果是沒法實現的，因此在某些狀況下仍是須要用文本的圖像的。 圖像替代，就是像咱們在平時將文本添加到文本中，而後經過css隱藏文本在它的位置上顯示一個背景圖片，這樣，搜索引擎仍然能夠搜到HTML文本，即便咱們禁用css後，文本時仍然是能夠顯示的。

 

引用《CSS禪意花園》中的一段解釋：

 

圖像替換技術使用display:none的本意並不僅是想要替換文本，這樣作還有一些更深層次的理由。實際上，如果沒有任何提示或幫助，計算機就沒法認出或讀取圖像中包含的文字。例如HTML中img元素，如果沒有了alt屬性，那麼對於google等搜索引擎，以及輔助瀏覽設備（例如，屏幕閱讀器便可閱讀頁面內容，並以聲音的形式告訴瀏覽者）之類沒法呈現圖像的客戶端來講，將變的豪無心義。而圖像替換技術則保留了被替換元素中的原有文本，所以不管對任何客戶而言，理解頁面內容都不成問題。

 

爲何要替換？

1. 網速很差的時候，圖片顯示不出，給讀者提示。

2. web內容無障礙，使屏幕閱讀器可理解。

 

有哪些方法？

1. display:none

缺點：大量使用容易被搜索引擎認爲做弊。屏幕閱讀器讀不到。圖片未加載不能顯示。許多流行的屏幕閱讀器會忽略那些display：none和visibility：hidden的元素，由於會徹底忽略這個文本，形成嚴重的訪問問題。

 

2. margin負值

 

 缺點；容易對佈局形成影響，不適合模塊化。圖片不加載不能顯示文字，屏幕閱讀器可以讀到

 

3. text-indent:

 

這個方法很好的解決了屏幕閱讀器的問題，可是在關閉圖像仍然打開css的狀況下是無效的，雖然這種狀況比較小，在網速訪問很是慢的狀況下或者訪問者可以打開圖像可是設置不打開，這些狀況下一些人是看不到被替換的文本的。

缺點：屏幕閱讀器可讀，圖片未加載不能顯示，firefox下焦點框擴大，需添加overflow：hidden。同時text-indent儘可能用於block元素。

 

4. font：0/0 a;

缺點：方法不錯，惟獨ie6顯示一個小點。能夠經過其餘方法兼容ie6

 

5：css clip屬性裁剪

 缺點：用好clip，事半功倍，只是hack較多，css代碼較多。

 

6： 又見overflow

 

 缺點：Apple的voice Over沒法獨處高度爲0的元素中的字。圖片未加載不能顯示，屏幕閱讀器能讀出。

 

7：line-height 3倍於height

缺點：屏幕閱讀器可讀，圖片未加載不能顯示。

 

 8. content url + display:inline-block;

缺點：屏幕閱讀器可讀，圖片未加載能顯示，此方法強強聯合，精益求精，同時還支持透明圖片和設置背景顏色。

 

 9. 合體

 缺點：屏幕閱讀器可讀，圖片未加載可現實，兼容ie，透明圖片，設置背景色。支持定寬，支持sprite。

 

 

trips：content 生成內容特別適合作一些裝飾性的佈局，由於content就是爲此而生的，不少小圖標的定位咱們徹底能夠拋棄空標籤了，還有強大的 CSS3 content：attr() 咱們拭目以待。

content在閉合浮動（清除浮動）上也大顯身手