DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS技巧:text-indent隱藏文字(以圖換字)
CSS技巧:text-indent隱藏文字(以圖換字)
編輯:CSS詳解     
以圖換字是CSS布局中非常常用的一種手段,因為圖片文字有時候比可選的文字的表達效果更好!
  因此,某些文字標題是用圖片來表達的。但寫一個img標簽實在不雅,為了照顧蜘蛛,我們使用浏覽器障眼法。
  於是用最常用的text-indent:

CSS:

 示例代碼 [www.mb5u.com] h4 a{background:url(http://www.w3cbbs.com/images/w3cbbs/logow3cbbs.png) left top no-repeat;width:300px;height:75px;text-indent:300px; white-space:nowrap; overflow:hidden;}
XHtml:

 示例代碼 [www.mb5u.com] <h4><a href="#">CSS網頁布局w3c標准</a></h4>
  但你會發現,在IE6中,沒有得到期望的效果,背景圖片和文字都被隱藏了(IE7也是這樣,其它的未做測試)。
  解決辦法至少有兩個:

 示例代碼 [www.mb5u.com] 1: 將display:inline-block;改為display:block;
2:去掉display:inline-block;屬性,加float:left;屬性。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved