添加背景图片到链接？

我有一个类，它看起来像这样：添加背景图片到链接？

.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/

谢谢！

来源

2012-09-28 user1638055

你可以提供一个演示？ [jsFiddle]（http://jsfiddle.net）是可取的。 – Chris

是的，我更新了我的帖子... – user1638055

它的工作原理！但是其他的“背景”属性掩盖了图像。删除它们，你会看到背景。那么，你想收回什么？ – M314

假设你想同时得到的图像和渐变为背景，请使用以下语法：

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

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

来源

2012-09-28 10:07:51 Chris

这样做！谢谢 – user1638055

这不会得到作者想要的结果。它将重叠渐变按钮顶部的图像。看起来很丑。 –

-1

您不能将多个backgorunds应用于相同的元素。

你最好的办法是在你的链接中添加一个span，并给它背景。

来源

2012-09-28 10:07:30 Salketer

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

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

来源

2012-09-28 10:08:47

试试这个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;

来源

2012-09-28 10:15:01 Champ

添加背景图片到链接？

回答

相关问题