最新消息

2014-03-26
用 CSS 讓連結以圖片顯示
我們必須用 CSS 對連結 <a> 做兩件事︰
  1. 設定連結 <a> 的 background-image 。
  2. 把連結 <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 不是 Standards Mode ,則需要特別處理 IE padding 定義錯誤的問題






回上頁   |   下一則

會員登入
帳號
密碼

忘記密碼? 註冊