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

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'); 
}