用 CSS 讓連結以圖片顯示 @ Vexed's Blog

2009-09-05 02:30 用 CSS 讓連結以圖片顯示

我先 DEMO 我想達到的效果。我要讓一個普通的連結 <a> ︰ Hello! I am Vexed.

藉由 CSS 變成用圖片顯示︰ Hello! I am Vexed.

那我們必須用 CSS 對連結 <a> 做兩件事︰

設定連結 <a> 的 background-image 。
把連結 <a> 裡面的字用不見。

其中第一點必須將連結 <a> 的 display 設為 block 或 inline-block 。第二點則用 padding 達成，連結 <a> 的 id 是 link ︰

#link {
    display : inline-block;
    background-image : url(image.gif);
    height : 200px;
    padding-left : 200px;
    width : 0;
    overflow : hidden;
}

padding-left 的值就是圖片的寬度，而 width 則設為 0 。也可以用 padding-right ，或 padding-top 、 padding-bottom 搭配 height 做到一樣的效果。如果你的 DOCTYPE 不是 Strict ，則需要特別處理 IE padding 定義錯誤的問題，像下面這樣︰

#link {
    display : inline-block;
    background-image : url(image.gif);
    height : 200px;
    padding-left : 200px;
    width : 0;
    overflow : hidden;
    *width : 200px;
}

*width 請參考分辨 IE6 IE7 Firefox 的 CSS Hack 。

延伸

以上是本文，下面是我知道的其他方法，也可以做到讓字消失的效果，但都有後遺症︰

text-indent
```
#link {
  display : block;
  background-image : url(img.gif);
  height : 200px;
  width : 200px;
  text-indent : -1000px;
  overflow : hidden;
}
```
在 IE6 IE7 ，如果 display 是設定為 inline-block ，且這個 HTML 元素又是這行的第一個元素的話， text-indent : -1000px 這行就會整個往左偏 1000px 。其他 IE6 IE7 text-indent 問題請參考 CSS 屬性 text-indent 。
line-height : 0

這個方法只有 IE 支援， Firefox 、 Safari 、 Chrome 都不支援，而且會讓圖片垂直位置偏移，可能需要使用 vertical-align 、 position : relative 、 padding-top 、 padding-bottom 進行微調。
font-size : 0

這個方法在 IE 需搭配 line-height 且 line-height 值的單位不是 px 、 pt 才會成功，單位是 in 有時成功、有時失敗。原因為何，我不知道。如果你對 line-height 沒有特殊需求，設定 line-height : 1 即可。 Firefox 則不需搭配 line-height 。 Safari 、 Chrome 不支援。