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

试试 DEMO

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

您无法将多个背景应用于同一元素。

您最好的选择是在链接中添加一个范围并为其提供背景信息。

将背景图像添加到链接？

4 个答案: