使用图像作为通用链接背景

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

要尝试两件事，实际的 链接中是否有任何文本？如果您使用 Firebug，您可以检查您是否确实获得了图像的正确文件路径...

Answer 3

HTMLCSS

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

​

#example-link a { 

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