使用圖像作爲通用鏈接背景

Question

我該如何做一個圖像作爲所有鏈接的背景？我想要一個代表按鈕的好框，但我無法弄清楚。

我曾嘗試：

a { 
    font-size: 40px; 
    background: url('images/shooting-stars/shooting-star-link.png') no-repeat left top; 
} 

但是這是行不通的，圖像不顯示。

Answer 1

「我希望有一個代表按鈕的好框，但我無法弄清楚。「 - 我不明白這個部分。

無論如何，你的CSS看起來不錯，你確定圖像存在嗎？這是完全相同的代碼，只是一個形象工作的例子，我敢肯定存在：

http://jsfiddle.net/3k9nm/

如果你想總是顯示圖像，即使該文本是短，你應該設定一個鏈接的最小寬度。這確實意味着它們必須是內嵌塊，您不能在常規鏈接（這是內聯元素）上設置寬度。

a { 
    display: inline-block; 
    min-width: 25px; 
} 

（25px的隨機選擇，填寫您的背景圖像的寬度。）

Answer 2

有兩件事要嘗試，在實際的<a>鏈接中是否有任何文字？如果你使用Firebug，你可以檢查你肯定得到了正確的文件路徑的圖片...

Answer 3

HTML

<div id="example-link"> 
    <a href="#">Link to journal article</a> 
</div> 

CSS

#example-link a { 

    background: url('images/shooting-stars/shooting-star-link.png'); 
}