css - 将背景图像添加到链接？

Question

我有一堂课，它看起来像这样：

.blueButton {
    some css goes here
}

现在要使用“按钮”，我使用以下 HTML 代码：

<a href="..." class="blueButton">link text</a> 

这显示了我的按钮，我唯一缺少的是链接文本右侧的背景图像。我试过了：

background: url('image url') no-repeat top right;

但是图像没有出现......这是正确的做法吗？这是一个小提琴：http: //jsfiddle.net/bSDYG/

谢谢！

Answer 1

假设您希望图像和渐变都是背景，请使用以下语法：

background: url(image-url), linear-gradient(...);

即，要指定多个背景，用逗号分隔它们的定义。

Answer 2

你设置了两次背景。第一次，作为图像。然后，作为渐变。只有最后一次适用。

要在按钮旁边放置图像，您的锚点内必须有两个单独的元素（例如两个跨度）。

Answer 3

试试这个演示

background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #98bff0), color-stop(1, #5e8dc6) );
background:-moz-linear-gradient( center top, #98bff0 5%, #5e8dc6 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#98bff0', endColorstr='#5e8dc6');
background: url('http://t1.gstatic.com/images?q=tbn:ANd9GcTjBC-ecGBr9x-QZ5Y7luNjiCNz3VuH1K7GeVu-rwabtLz_6QkrKVsUXfg') no-repeat center right;
background-color:#98bff0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:6px 8px;
text-decoration:none;

Answer 4

您不能将多个背景应用于同一元素。

您最好的选择是在您的链接中添加一个跨度并为其提供背景。