CSS背景圖片作為連結效果

antzone發表於2017-03-06
CSS

實際應用中，可能感覺文字連線過於單調不夠美觀，如果使用圖片作為連線的話可能會更好一些.

實現方式有種，下面就做一下簡單介紹。

實現方式一:

直接將圖片包裹在標籤<a></a>之中，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<a href="http://www.softwhy.com"><img src="image/link.jpg" border="0"/></a>

以上程式碼實現了我們的要求，不過特別注意的是，一定要設定圖片的邊框尺寸為0.否則可能會出現邊框現象。

實現方式二:

[HTML] 純文字檢視 複製程式碼執行程式碼
<style type="text/css">
a{
  width:100px;
  height:30px;
  display:block;
  background:url(link.jpg) no-repeat;
}
</style>
<body>
<a href="http://www.softwhy.com"></a>
</body>

可以將圖片以背景圖片方式展現，也可以實現我們想要的效果。

相關文章