圖片取代文字技巧(使用背景圖並隱藏box內文字的方法)

以下標籤是指屬於block的標籤,如果屬於inline,則先使用display:block做轉換

  • 方法一:
    如果文字只被一個標籤包住,則使用text-intent設定負值,讓字往左縮排,負值要夠大,例如-3000px
  • 方法二:方法一有個壞處,如果螢幕解析度很好的時候,總有一天還是會被看到字,所以後來我是用text-indent:-300px;搭配overflow:hidden;隱藏
  • 方法三:
    文字只被一個標籤包住的另外一種方式是設定很大的letter-spacing,例如100em,然後搭配指定height跟overflow:hidden;。
  • 方法四:
    如果文字被兩個標籤包住,裡面的標籤padding-top設定成跟外面標籤高度相同,外面的標籤設定overflow:hidden;這個方法我通常拿來用在網站標題要放logo的時候會這樣處理。